快捷導(dǎo)航

vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動態(tài)合并方式

更新時間：2024年02月28日 10:20:51 作者：活潑可愛的小環(huán)環(huán)

這篇文章主要介紹了vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動態(tài)合并方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

使用element的span-method方法實現(xiàn)合并

首先繪制表格，綁定合并方法:span-method=“objectSpanMethod4”

<!-- 列的合并 -->
    <el-table ref="tableDD4" id="tableDD4" :data="tableData4" :span-method="objectSpanMethod" max-height="600" border>
      <el-table-column label="一級表頭" align="left">
        <el-table-column label="二級表頭1" prop="firstCatalogue" align="left" width="300" />
        <el-table-column label="二級表頭2" prop="secondCatalogue" align="left" />
        <el-table-column label="二級表頭3" prop="insuranceName" align="left" width="140" />
        <el-table-column label="二級表頭4" prop="isMatch" align="left" width="130" />
      </el-table-column>
    </el-table>

首先設(shè)置變量margeArray4，用來存儲rowspan(）方法計算出來的每一列單元格合并列數(shù)

rowspan（）方法詳細(xì)介紹

index === 0，第一行，直接先給數(shù)組 push 進(jìn)一個1，表示自己先占一行，position 是數(shù)組元素的位置

（此時是從數(shù)組元素的第一個開始，所以position 為 0）， position為 0 意思表示的就是數(shù)組的第一個元素

index 為 2 的時候，讓第二行與第一行作比較：

（1）如果第二行與第一行相等的話，spanArr[position] 就 +1，當(dāng)有 n 行第一行相同，spanArr[position] 就為 n，表示向下合并 n 行；

第二行自己就 spanArr.push(0)，表示第二行“消失”，因為第一行和第二行合并了；

（2）如果第二行與第一行不相等的話，那么 spanArr.push(1);就讓第二行自己獨(dú)占一行；

更新position = index ：把指針拿到 index 這行來，用來設(shè)置數(shù)組 spanArr[position] 的合并情況元素值，然后定義從此行開始向下合并幾行

data() {
    return {
      //接收后端數(shù)據(jù)
      tableData1: [],
      //存儲每一列合并行以及下標(biāo)數(shù)據(jù)
      margeArray: [],
    }
},

rowspan(tableData, spanArr, position, spanName) {
      tableData.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1);
          position = 0;
        } else {
          if (tableData[index][spanName] === tableData[index - 1][spanName]) {
            spanArr[position] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            position = index;
          }
        }
      });
},

objectSpanMethod方法的實現(xiàn)：

// 表格合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 計算一共有幾列數(shù)據(jù)
      let arraynum = Object.keys(this.tableData1[0]).length
      for (let i = 0; i < 2; i++) {
        if (columnIndex == i) {
          const _row = this.margeArray[i].Arr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col,
          };
        }
      }
},

axios請求數(shù)據(jù)之后，調(diào)用計算合并行，實現(xiàn)合并

//此處是我封裝好的請求方法，你自己的實際情況修改即可
    this.$postRequest('/basicSystem/export/sheet1', { year: this.year }).then(({ data }) => {
        //判斷請求狀態(tài)為success/false，請求成功，處理數(shù)據(jù)，否則輸出錯誤信息 
        if (data && data.type === 'success') {
          //接收后端返回的數(shù)據(jù)
          this.tableData1 = data.data
          //開始 調(diào)用方法計算需要合并的數(shù)據(jù)
          for (let i = 0; i < Object.keys(this.tableData1[0]).length; i++) {
            // 首先添加一個存放合并行數(shù)據(jù)的變量
            this.margeArray.push({ Arr: [], Position: 0, })
            // 得到下標(biāo)對應(yīng)的key值
            const element = Object.keys(this.tableData1[0])[i];
            // 調(diào)用合并，
            this.rowspan(this.tableData1, this.margeArray[i].Arr, this.margeArray[i].Position, element);
          }
        } else {
          this.$message.error(data.message)
        }
      }).catch(error => {
        this.$message.error(error)
      })