Element UI Table合并行

Vue使用Element-ui Table 合并行，官方只是一个非常简单的合并例子，通常业务都是以某个字段进行合并。

效果图

代码实现

1、Table

2、定义变量

data(){
        return{
            dataTable: [],
            spanArr: [],
            position: 0,
        }
    },

3、合并方法

在table组件中，提供了一个属性:span-method,它是一个Function，本身有4个参数，分别是row,rowIndex,colum,columIndex;这四个值可以直接拿到。先处理连续相同的列的值，做标记，然后，在合并的方法中，根据我们处理好的数组，去对应的合并行或列。

3.1、处理数据

mounted(){
     this.onMergeLines();
 },

onMergeLines(){
            this.dataTable.forEach((item, index) => {
                if (index === 0) {
                    this.spanArr.push(1);
                    this.position = 0;
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (this.dataTable[index].distribution === this.dataTable[index - 1].distribution) {
                        this.spanArr[this.position] += 1;
                        this.spanArr.push(0);
                    } else {
                        this.spanArr.push(1);
                        this.position = index;
                    }
                }
            })
        },

3.2、objectSpanMethod

objectSpanMethod({row,column,rowIndex,columnIndex}) { 
            if (columnIndex === 0) {
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                };
            }
        },

4、测试数据

	this.ruleTable = [
       {distributionId:'1',distribution:'测试1',seatName:'张三',distributionRatio:25,thisAssignment:'23',totalTasks:90,maxTasks:100,checkStatus:'正常'},
       {distributionId:'1',distribution:'测试1',seatName:'张三',distributionRatio:25,thisAssignment:'23',totalTasks:80,maxTasks:200,checkStatus:'正常'},
       {distributionId:'2',distribution:'测试2',seatName:'张三',distributionRatio:25,thisAssignment:'31',totalTasks:14,maxTasks:100,checkStatus:'正常'},
       {distributionId:'2',distribution:'测试2',seatName:'张三',distributionRatio:25,thisAssignment:'12',totalTasks:52,maxTasks:100,checkStatus:'超额'}
 ]