【VUE】 elementUI Table 合并第一列相同的数据

前言

今天有个需求，需要将table第一列相同的内容进行合并。

当前效果:

实现效果:

准备

需要用到的Element UI的方法

具体实践

• html部分

<el-table :data="indexShardLocation"
      border
           :span-method="objectSpanMethod"
           style="width: 100%">
   <el-table-column prop="index_name"
                    label="索引名"
                    width="240">
   el-table-column>
el-table>

• method部分

flitterData (arr) {
      let spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //name 修改
          if (item.name === arr[index - 1].name) { //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          };
        }
      });
      return {
        one: spanOneArr,
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // this.tableData  修改
        const _row = (this.flitterData(this.indexShardLocation).one)[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },

好了，成功实现！