el-table合并多行相同列

const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
    //2合并第三列每一行相同的数据
    if (columnIndex === 2) {
        // 获取当前单元格的值  stationLevel是那一列的字段
        const currentValue = row['stationLevel'];
        // 获取上一行相同列的值。 tableDate:table表格的数据
        const preRow = tableDate.value[rowIndex - 1];
        const preValue = preRow ? preRow['stationLevel'] : null;
        // 如果当前值和上一行的值相同,则将当前单元格隐藏
        if (currentValue === preValue) {
            return { rowspan: 0, colspan: 0 };
        } else {
            // 否则计算当前单元格应该跨越多少行
            let rowspan = 1;
            for (let i = rowIndex + 1; i < tableDate.value.length; i++) {
                const nextRow = tableDate.value[i];
                const nextValue = nextRow['stationLevel'];
                if (nextValue === currentValue) {
                    rowspan++;
                } else {
                    break;
                }
            }
            return { rowspan, colspan: 1 };
        }
    }
};

效果:

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table是一个前端组件库element-ui中的表格组件,它提供了合并行和的功能。通过设置span-method属性,可以自定义合并行的方式,具体可以通过循环数据数据获取该需要合并的行数,以实现多行相同数据变成一行显示的效果。 示例代码如下: ```html <template> <div class="table"> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%"> <el-table-column prop="time" label="时间"></el-table-column> <el-table-column prop="grade" label="年级"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="subjects" label="科目"></el-table-column> <el-table-column prop="score" label="成绩"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { time: '2020-01-01', grade: '一年级', name: '张三', subjects: '语文', score: 90 }, { time: '2020-01-01', grade: '一年级', name: '李四', subjects: '数学', score: 95 }, { time: '2020-01-01', grade: '一年级', name: '王五', subjects: '英语', score: 88 }, { time: '2020-01-02', grade: '二年级', name: '赵六', subjects: '语文', score: 92 }, { time: '2020-01-02', grade: '二年级', name: '钱七', subjects: '数学', score: 96 }, { time: '2020-01-02', grade: '二年级', name: '孙八', subjects: '英语', score: 85 }, ], }; }, methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 根据业务逻辑判断需要合并的行数 if (columnIndex === 0) { // 合并第一 if (rowIndex === 0 || rowIndex === 3) { return { rowspan: 3, colspan: 1, }; } return { rowspan: 0, colspan: 0, }; } }, }, }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值