Element-Plus 中Table 表格合并列数据，当列数据相同时进行合并span-method

合并列，使用element中table自带属性 span-method

  当前行row、当前列column、当前行号rowIndex、当前列号columnIndex"

如图：合并序号为1和序号为5的

代码如下： 可直接复制使用

  <el-table

        v-loading="loading"

        :data="tableData"

        border

        ref="multipleTable"

        style="width: 100%"

        :header-cell-style="{

          backgroundImage: 'linear-gradient(176deg,#accbee ,#e7f0fd 100%)',

          color: '#000',

        }"

        :span-method="objSpanMethod"

      >

        <el-table-column type="index" width="60" label="序号" align="center" />

---

 将表格中bookCodes一样的数据-来进行合并列

---

     //合并列
    flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
            // 将bookCodes一样的数据-进行合并列
          if (item.bookCodes === arr[index - 1].bookCodes) {
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },

---

 element Plus中 span-method绑定的方法-objSpanMethod

---

    //合并 预约编号相同的合并    this.tableData为表格数据
    objSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log("当前行row、当前列column、当前行号rowIndex、当前列号columnIndex")

      //合并表格列为1的数据，表格从0开始，也就是合并第1列数据

      if (columnIndex === 1) {
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }

   //合并表格列为5的数据，表格从0开始，也就是合并第5列数据
      if (columnIndex === 5) {
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    
      }
    },

二、注意： 

 如果遇到：比如(我是bookCodes )，bookCodes 是一样的但是没有合并，是因为跨行了，如上代码只是将下一行数据和上一行数据相邻的数据进行比较，对于上一行之前的跨行数据是没有比较的，所以在进行比较之前，可以将数据按照bookCodes 进行排序，可以使用sort数组方法来对表格数据进行排序。

如下：用sort将bookCodes相同的放一起，在进行合并。

    // 将bookCodes相同的放一起

          this.tableAllData.sort((a, b) => {

            if (a.bookCodes < b.bookCodes) return 1; // a 在前

            if (a.bookCodes > b.bookCodes) return -1; // b 在前

            return 0; // 保持不变

          });

          console.log('排序后的数据：', this.tableAllData);

sort排序后在把所有相同的bookCodes 进行合并，不会出现相同不合并断层的影响。