element 表格tabel笔记之合并单元格

element 表格tabel笔记之合并单元格

1. 绑定合并:span-method=“objectSpanMethod”

 <el-table
        :data="updateTable"
        style="width: 100%"
        height="380"
        class="tableStyle tableRadius mt10"
        tooltip-effect="light"
        :span-method="objectSpanMethod"
      >

２. 设置合并方法

objectSpanMethod({ rowIndex, columnIndex }) {
      // 用于设置要合并的列，1表示第二列
      if (columnIndex === 1) {
        const cRow = this.spanArr[rowIndex];
        const cCol = cRow > 0 ? 1 : 0;
        return {
          rowspan: cRow, // 合并的行数
          colspan: cCol, // 合并的列数，为0表示不显示
        };
      }
    },

1. 计算需要合并的是哪些

  getSpanArr(data) {
      this.spanArr = [];
      this.pos = 0;
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          // 如果是第一条记录（即索引是0的时候），向数组中加入１
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          if (data[i].date === data[i - 1].date) {
    // 根据后端返回的时间作为判断条件，如果和上一条时间相同需要合并，不相同不合并）
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            // 不相等push 1
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },

４. 调用合并方法

 watch: {
    // updateTable是表格数据，数据变化调用合并
    updateTable: {
      handler(val) {
        this.getSpanArr(val);
      },
      immediate: true,
    },
  },

５. 数据准备

data() {
      updateTable: [],
		spanArr: [],
      pos: 0,
}