Vue中如何合并el-table第一列相同數(shù)據(jù)

更新時(shí)間：2023年03月27日 10:38:36 作者：半度納

這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue合并el-table第一列相同數(shù)據(jù)

業(yè)務(wù)需求

需要將el-table表格第一列相同的內(nèi)容進(jìn)行合并。

解決辦法

el-table中使用 :span-method="objectSpanMethod"方法

vue標(biāo)簽

<el-table :data="contractList" border ?style="width: 100%" :span-method="objectSpanMethod">
?? ? ?<el-table-column label="各部門(mén)部1月-12月合同回款情況" align="center">
?? ? ? ?<el-table-column prop="quarterly" ?width="100" align="center" />
?? ? ? ?<el-table-column prop="mon" width="80" align="center" />
?? ? ? ?<el-table-column prop="amountReceived" width="180" align="center" />
?? ? ? ?<el-table-column prop="remark" width="180" align="center" />
?? ? ?</el-table-column>?? ?
</el-table>

methods內(nèi)部處理

/* 表格合并列和行 */
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
?? ??? ?if (columnIndex === 0) {
?? ??? ? ?const _row = this.flitterData(this.contractList).one[rowIndex];
?? ??? ? ?const _col = _row > 0 ? 1 : 0;
?? ??? ? ?return {
?? ??? ? ? ?rowspan: _row,
?? ??? ? ? ?colspan: _col,
?? ??? ? ?};
?? ??? ?}
?? ?},
?? ?/**合并表格的第一列，處理表格數(shù)據(jù) */
?? ?flitterData(arr) {
?? ? ?let spanOneArr = [];
?? ? ?let concatOne = 0;
?? ? ?arr.forEach((item, index) => {
?? ? ? ?if (index === 0) {
?? ? ? ? ?spanOneArr.push(1);
?? ? ? ?} else {
?? ? ? ?//注意這里的quarterly是表格綁定的字段，根據(jù)自己的需求來(lái)改
?? ? ? ? ?if (item.quarterly === arr[index - 1].quarterly) {
?? ? ? ? ? ?//第一列需合并相同內(nèi)容的判斷條件
?? ? ? ? ? ?spanOneArr[concatOne] += 1;
?? ? ? ? ? ?spanOneArr.push(0);
?? ? ? ? ?} else {
?? ? ? ? ? ?spanOneArr.push(1);
?? ? ? ? ? ?concatOne = index;
?? ? ? ? ?}
?? ? ? ?}
?? ? ?});
?? ? ?return {
?? ? ? ?one: spanOneArr,
?? ? ?};
?? ?},

效果展示

el-table合并相同單元格問(wèn)題

項(xiàng)目需求table表格中，相同的類型合并成一個(gè)單元格展示。

問(wèn)題描述

el-table并沒(méi)有相關(guān)的語(yǔ)法直接合并，需要我們自己傳入一個(gè)方法返回一個(gè)數(shù)組格式，來(lái)確定要合并行列。

效果圖

解決問(wèn)題

首先需要在 el-table 標(biāo)簽上綁定:span-method="objectSpanMethod"

<el-table :data="tableData" :span-method="objectSpanMethod" >
    <el-table-column prop="projectName" label="訂單類型" />  
</el-table>

再去methods中定義 objectSpanMethod 方法，data中定義一個(gè)rowSpanArr參數(shù)

// 獲取相同名稱的個(gè)數(shù) tableData: 表格的數(shù)據(jù), projectName: 確定相同的參數(shù)
handleTableData(tableData){
      let rowSpanArr = [], position = 0;
      for (let [index, item] of tableData.entries()) {
        if (index == 0) {
          rowSpanArr.push(1);
          position = 0;
        } else {
          if (item.projectName == tableData[index - 1].projectName) {
            rowSpanArr[position] += 1; //項(xiàng)目名稱相同，合并到同一個(gè)數(shù)組中
            rowSpanArr.push(0);
          } else {
            rowSpanArr.push(1);
            position = index;
          }
        }
      }
      this.rowSpanArr = rowSpanArr
}
// 單元格的處理方法 當(dāng)前行row、當(dāng)前列column、當(dāng)前行號(hào)rowIndex、當(dāng)前列號(hào)columnIndex
objectSpanMethod({ row, column, rowIndex, columnIndex }){
     if (columnIndex === 0) {
        const rowSpan = this.rowSpanArr[rowIndex];
        return {
          rowspan: rowSpan, //行
          colspan: 1 //列
        };
      }
}

擴(kuò)展

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) { // 判斷是不是第一列，只有第一列才執(zhí)行合并
      if (rowIndex % 2 === 0) { // 判斷能不能被2整除
          return {
            rowspan: 2, // 從當(dāng)前單元格開(kāi)始，執(zhí)行合并2行
            colspan: 1, // 從當(dāng)前單元格開(kāi)始，執(zhí)行合并1列
          };
       } else {
         return { // 第一列的其他元素不執(zhí)行合并
           rowspan: 0, // 為0，不執(zhí)行合并
           colspan: 0  // 為0，不執(zhí)行合并
         };
       }
    }
 }