Element-UI中el-table根据列内容相同的值自动合并单元格

1、处理表格单元格函数:

 //设置单元格
getSpanArr(list) {
    // 先给所有的数据都加一个v.rowspan = 1
    list.forEach(item => {
        item.rowspan = 1;
        item.rowspan1 = 1;
        // 有几列想合并就设置几个
        ...........
    });
    // 双层循环
    for (let i = 0; i < list.length; i++) {
        for (let j = i + 1; j < list.length; j++) {
            //此处可根据相同字段进行合并
            if (list[i].XXX== list[j].XXX) {
                list[i].rowspan++;
                list[j].rowspan--;
            }
            if (list[i].XXX== list[j].XXX) {
                list[i].rowspan1++;
                list[j].rowspan1--;
            }
        }
        // 这里跳过已经重复的数据
        i = i + list[i].rowspan - 1;
        i = i + list[i].rowspan1 - 1;
    }
    this.tableData = list;
},

2.开始调用:

created(){
    this.getSpanArr(表格数据)
}

3.table标签添加合并单元格函数:

:span-method="ObjectSpanMethod"

4.合并单元格函数:

// 合并单元格相同内容
ObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // 第一列
    if (columnIndex === 0) {
        return {
            rowspan: row.rowspan,
            colspan: 1,
        };
    }
    // 第二列
    if (columnIndex === 1) {
        return {
            rowspan: row.rowspan1,
            colspan: 1,
        };
    }
    // row.XXX的值跟上述函数对应
    .........
},

你可能感兴趣的:(vue.js,前端,javascript)