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的值跟上述函数对应
    .........
},

el-tableElement UI框架的一个表格组件,可以用于展示和编辑数据。要实现Excel合并行和合并功能,可以使用el-table的特定属性和方法。 要实现合并行,可以使用el-table的span-method属性。该属性接受一个函数,用于计算每个单元格合并行数。在函数,可以根据当前单元格和相邻单元格来判断是否需要合并行,并返回合并行数。 要实现合并,可以使用el-table-column的prop属性。该属性指定了当前对应数据对象的字段名。如果多个的prop属性相同,那么这些将会合并为一。 下面是一个示例代码,演示了如何使用el-table实现合并行和合并: ```html <template> <el-table :data="tableData" :span-method="handleSpanMethod"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 18, gender: '男' }, { name: '赵六', age: 22, gender: '女' }, ], }; }, methods: { handleSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 判断当前是否为第一 if (rowIndex === 0 || row.name !== this.tableData[rowIndex - 1].name) { // 判断当前行是否为第一行或者与上一行的name字段不同 const rowspan = this.getRowspan(row.name, columnIndex); if (rowspan > 1) { return { rowspan, colspan: 1, }; } } } }, getRowspan(name, columnIndex) { let rowspan = 1; for (let i = 1; i < this.tableData.length; i++) { if (this.tableData[i].name === name) { rowspan++; } else { break; } } return rowspan; }, }, }; </script> ``` 在上述代码,handleSpanMethod函数用于计算每个单元格合并行数。getRowspan函数用于计算每个姓名相同单元格合并行数。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值