vue element table 表格合並

需求：遇到相同內容的進行表格的上下合並
比如我的需求是把相同的一級部門，二級部門相同的合並單元格

效果

1.表格綁定單元格合並方法

2.data定義變量（命名不規范）

為了演示：：

3.定義合並單元格rowspan方法

 rowspan(spanArr, position, spanName) {
      // console.log(1111, "111111");
      // console.log(this.tableData);

      this.tableData.forEach((item, index) => {

        if (index === 0) {

          spanArr.push(1);

          position = 0;

        } else {

          if (

            this.tableData[index][spanName] === this.tableData[index - 1][spanName]
          ) {

            spanArr[position] += 1;

            spanArr.push(0);

          } else {

            spanArr.push(1);

            position = index;

          }
        }
      });
    },

4.使用rowspan方法

在查詢表格數據成功的時候進行調用

5.objectSpanMethod方法

4.objectSpanMethod代碼

根據columnIndex 判斷哪一行進行合並

  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(rowIndex,'rowIndex')
      // console.log(columnIndex,'columnIndex')
      if (columnIndex === 1) {
        const _row = this.testArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(_row, _col, "row col");
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 2) {
        const _row = this.testArr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      // if (columnIndex === 12) {
      //   const _row = this.testArr3[rowIndex];
      //   const _col = _row > 0 ? 1 : 0;
      //   return {
      //     rowspan: _row,
      //     colspan: _col,
      //   };
      // }
      // if (columnIndex === 13) {
      //   const _row = this.testArr4[rowIndex];
      //   const _col = _row > 0 ? 1 : 0;
      //   return {
      //     rowspan: _row,
      //     colspan: _col,
      //   };
      // }
    },

6.解決新增出現的問題

新增成功后，數據雖然加上去了，但是由於我們去數據進行了處理，會出現表格錯亂的情況

需要我們手動刷新一下，因此我們可以在新增成功后將頁面自動刷新一下即可解決此問題。