循环表格组件合并单元格

 <div v-for="(item, index) in containerTable" :key="index">
   <table-list
    :isMyTable="false"
    :tableConfig="item"
    :tableHeader="item.tableHeader"
    :objectSpanMethod="(...arg) => objectSpanMethod(...arg, item.tableData)"/>
  </div>
//------methods----
 objectSpanMethod({ row, column, rowIndex, columnIndex }, data) {
      if (columnIndex === 0) {//因为我是合并第一列的
        var spanArr = this.getSpanArr(data, "firstLayer");//firstLayer你的参数key,
//  可以根据column.property 或者column.label表头,label从tableHeader取
        const _row = spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 处理合并⾏的数据
    getSpanArr(data, spanKey) {
      var spanArr = [];
      var pos = "";
      this.spanArr = [];
      this.pos = "";
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          spanArr.push(1);
          pos = 0;
        } else {
          if (data[i][spanKey] === data[i - 1][spanKey]) {
            spanArr[pos] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            pos = i;
          }
        }
      }
      return spanArr;
    },

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在element-ui的表格组件合并单元格,可以利用`span-method`属性来自定义合并规则。下面是一个示例代码,展示如何合并表格中相同的值: ```html <template> <el-table :data="tableData" :span-method="mergeCells"> <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: 20, gender: '男' }, { name: '李四', age: 22, gender: '女' }, { name: '王五', age: 20, gender: '男' }, { name: '赵六', age: 22, gender: '女' } ] }; }, methods: { mergeCells({ row, column, rowIndex, columnIndex }) { if (columnIndex === 1) { // 合并年龄列 if (rowIndex === 0 || (rowIndex > 0 && row.age !== this.tableData[rowIndex - 1].age)) { const rowspan = this.getRowspan(row.age, columnIndex); if (rowspan > 1) { return { rowspan, colspan: 1 // 只合并一列 }; } } } }, getRowspan(value, columnIndex) { let rowspan = 1; for (let i = this.tableData.length - 1; i > 0; i--) { if (this.tableData[i].age === value && i !== columnIndex) { rowspan++; } else { break; } } return rowspan; } } }; </script> ``` 上述代码中,我们定义了一个名为`mergeCells`的方法来确定单元格是否需要合并。在`span-method`中绑定该方法后,根据特定的条件返回合并的行数和列数。 以上代码仅合并了年龄(第二列)相同的单元格,您可以根据需要进行修改和扩展。请确保在实际使用时,将表格数据和合并规则适配到您的具体情况。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值