elementui之table中相同数据的单元格合并

elementui之table中相同数据的单元格合并

方法代码：

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let list = this.sjzbtjList                  // this.sjzbtjList  为列表数据
      let columnMerge = (fieldName) => {
        if (
          rowIndex === 0 ||
          row[fieldName] !== list[rowIndex - 1][fieldName]
        ) {
          let rowspan = 1;
          for (let i = rowIndex + 1; i < list.length; i++) {
            if (list[i][fieldName] === row[fieldName]) {
              rowspan++;
            } else {
              break;
            }
          }
          return {
            rowspan,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      };
      if (columnIndex === 0) {                      // 填入需要合并的列
        return columnMerge('firstLevelIndex');      // 填入对应的列的字段名
      } else if (columnIndex === 1) {
        return columnMerge('secondLevelIndex');
      } else if (columnIndex === 2) {
        return columnMerge('thirdLevelIndex');
      } else {
        return {
          rowspan: 1,
          colspan: 1,
        };
      }
    }

调用方法：

    <el-table
      v-loading="loading"
      :data="sjzbtjList"
      :span-method="objectSpanMethod"
      border=1
    >

 

 

钻研不易转载请注明出处。。。。。