vue+element跨行跨列合并

现在vue还是很流行，大家都在学习并且使用vue框架，element-ui是饿了么基于vue.js编写的前端ui框架，像其他ui框架一样，极大提高了前端工作效率，文档也很简单易懂，具体使用可以到官方文档查看，可是在使用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属性。也可以返回一个键名为rowspan和colspan的对象，下面来看例子：

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组件合并行，合并列的问题。很高兴你还能看到这里,有啥问题可以留言告诉我，一起交流学习,如果觉得有点用，麻烦点个赞吧，没功劳都有苦劳呀。