vue+element table跨行跨列合并

 

使用table组件过程中,会遇到一个问题,table跨行跨列怎么实现?

首先在html文档中使用element-ui时需要引入相关的SDN:


<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

下面是原来的table组件样式:

1.合并列使用arraySpanMethod函数:

该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,实际上就是给td加上rowspan属性,第二个元素代表colspan,实际上就是给td加上colspan属性。也可以返回一个键名为rowspancolspan的对象,下面来看例子;

1.1在表格中加入:span-method="arraySpanMethod"属性:

<template>
    <el-table
            :span-method="arraySpanMethod"
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>
</template>

1.2在methods中加入arraySpanMethod函数:

new Vue({
    el: '#app',
    data: function() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    methods: {
        arraySpanMethod({row, column, rowIndex, columnIndex}) {
            if (rowIndex % 2 === 0) {//判断条件可以设置成你想合并的行的起始位置,本例子是除了标题第一行
                if (columnIndex === 1) {///判断条件可以设置成你想合并的列的起始位置,本例子是第二列开始
                    return [1,2];//合并第一单元格至第二单元格
                } else if (columnIndex === 1) {
                    return [0, 0];
                }
            }
        },
    }
    
})

2.合并行:objectSpanMethod

2.1在表格中加入:span-method=”objectSpanMethod”属性

<template>
    <el-table
            :span-method="objectSpanMethod"
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>
</template>

2.2在methods中加入objectSpanMethod函数如下代码:

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 1) {//判断条件可以设置成你想合并的列的起始位置,本例子是第二列开始
        if (rowIndex % 2 === 0) {//判断条件可以设置成你想合并的行的起始位置,本例子是除了标题第一行
            return {
                rowspan: 2,
                colspan: 1
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    }
}

以上是在element中使用table组件合并行,合并列的问题。

推荐阅读:

vue限制element-ui 表格显示行数

7个VUE前端精美UI框架

vue引入element-ui的流程和注意事项

VUE自定义指令图文解读

VUE模板语法快速入门教程

本文为博主原创文章,知识共享,开源精神,转载注明出处。