el-table 单元格合并

最新推荐文章于 2024-05-23 14:42:14 发布

syz1203

最新推荐文章于 2024-05-23 14:42:14 发布

阅读量528

点赞数 3

文章标签： vue.js html elementui

本文链接：https://blog.csdn.net/syz1203/article/details/121657633

版权

1、html

<el-table
            highlight-current-row
            :data="data"
            stripe
            :span-method="objectSpanMethod"
          >

2、处理数据，得到遍历表格数据最终得到的结果为 id_array = [3, 0, 0, 2, 0, …]的形式，3代表当前单元格合并多少行， 0代表不合并

id_init(data) {
      this.id_array = [];//空数组
      this.id_pos = 0;
      for (let i = 0; i < data.length; i++) {
        // 当 i == 0 说明数据是第一行, 需要重新赋值
        if (i == 0) {
          // this.id_array.push(1) 说明这一行数据被显示出来
          this.id_array.push(1);
          // this.id_pos = 0 重置当前的计数器
          this.id_pos = 0;
        }
        // 说明不是从第一行开始遍历的
        else {
          // 判断当前的指定数据是否和之前的指定数据值相同
          if (data[i].name == data[i - 1].name) {
            // 如果相同就需要将 this.id_array 的数据自加
            this.id_array[this.id_pos] += 1;
            // 同时需要将 this.id_array push一个0 表示下一行不用显示
            this.id_array.push(0);
          }
          // 说明 当前的数据和上一行的指定数据不同
          else {
            // this.id_array.push(1) 说明当前一行的数据需要显示
            this.id_array.push(1);
            // 重新给计数器赋值，数组array中的位置
            this.id_pos = i;
          }
        }
      }
    },

3、合并单元格

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 用于给第一列的table合并，
      if (columnIndex == 0) {
        // this.id_array[rowIndex] 取出当前存放行的合并状态
        const _row = this.id_array[rowIndex];
        // 判断当前的 列是否需要显示
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },