VUE elementUI Table 使用span-method（實現多列行合並）

首先看下實現效果

  官方例子

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {//哪一列可以合並（第一列）
          if (rowIndex % 2 === 0) {//滿足合並行的條件（偶數行）
            return {
              rowspan: 2,//合並的行數
              colspan: 1 //合並的列數，設為０則直接不顯示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

 element-ui官網中關於行合並的例子是根據行號進行合並的，這顯然不符合我們日常開發需求，因為通常我們table中的數據都是動態生成的，所以需要做一些修改。

在初始化的data中定義：

   tableData: [
        {
          id: "保險杠",
          name: "A1568804340 9999",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "保險杠",
          name: "A2538850001 9999",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "保險杠",
          name: "A2538851101 9999",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "小件",
          name: "A1568859400 9999",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "小件",
          name: "A1568803740 9999",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
      mergerItems: [
        { columnIndex: 0, spanArr: [], pos: 0, prop: "id" },
        { columnIndex: 1, spanArr: [], pos: 0, prop: "name" },
      ],

然后在methods鈎子函數中定義如下

  cellMerge({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        //這里判斷第幾列需要合並
        let item = this.mergerItems.find(
          (item) => item.columnIndex === columnIndex
        );
        const _row = item.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    getSpanArr(data, array) {
      //循環數據處理
      for (let n = 0; n < array.length; n++) {
        array[n].spanArr = []; //數據清空(重新調此方法的時候需要清空上一次的數據)
        for (let i = 0; i < data.length; i++) {
          if (i === 0) {
            array[n].spanArr.push(1);
            array[n].pos = 0;
          } else {
            // 判斷當前元素與上一個元素是否相同
            if (data[i][array[n].prop] === data[i - 1][array[n].prop]) {
              array[n].spanArr[array[n].pos] += 1;
              array[n].spanArr.push(0);
            } else {
              array[n].spanArr.push(1);
              array[n].pos = i;
            }
          }
        }
      }
    },

table表格中調用

 <!--表格渲染-->
    <el-table
      :data="tableData"
      :span-method="cellMerge"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="噴塗" width="180"> </el-table-column>
      <el-table-column prop="name" label="零件編號"> </el-table-column>
      <el-table-column prop="amount1" label="總訂單數"> </el-table-column>
      <el-table-column prop="amount2" label="總庫存"> </el-table-column>
      <el-table-column prop="amount3" label="數值 3（元）"> </el-table-column>
    </el-table>

說明：

上面數據需要注意的是mergerItems里面columnIndex 一定要與你需要合並的列對應上：例如我這個就是第一列以及第二列合並（因為columnIndex 就是一個標記，可以根據這個字段找到對應的列下面所記錄需要合並行的信息）。mergerItems里面prop對應的就是tableData里面需要合並的字段對應上（這里的tableData我寫死了，具體tableData的數據還是得看后台怎么定義的）
調用：this.getSpanArr(this.tableData, this.mergerItems)在請求到表格數據后進行調用或者表格數據更新后再次調用。