elementui——表格的相同內容單元格合併

在今天工作中遇到了相同單元格需要合併的一個需求，實現記錄如下。

實現效果：

 

 

 

任務要求：

對錶中體系這一列相同的體系進行合併。

 

思路:
定義一個空陣列：[]
定義一個變數：0
遍歷資料如果有相同資料 在空陣列新增一個0(相同資料的起始位加1)，不相同在資料push 一個1（變數改成當前索引）

 

Table部分程式碼:

 <el-table ref="TaskListDistributionDetailTable" border :data="value.dataList" class="materialInfoTable clear-input-v" :span-method="objectSpanMethod">
                            <el-table-column type="index" align="center" label="序號" width="60">
                                <template slot-scope="scope">
                                    {{scope.$index+1}}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="體系" min-width="120">
                                <template slot-scope="scope">  
                                    <span>{{scope.row.systemTypeName}}</span>
                                </template>
                            </el-table-column> 
                            <el-table-column align="center" label="部門" min-width="120">
                                <template slot-scope="scope">  
                                    <span>{{scope.row.deptName}}</span>
                                </template>
                            </el-table-column> 
                            <el-table-column align="left" label="年度考核得分" min-width="100">
                                <template slot-scope="scope">  
                                    <span>{{scope.row.assessmentScore}}</span>     
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="考核排名" min-width="100">
                                <template slot-scope="scope"> 
                                    <span>{{scope.row.assessmentRank}}</span>    
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="扣分原因" min-width="300">
                                <template slot-scope="scope"> 
                                    <span>{{scope.row.deductionReason}}</span>      
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="備註" min-width="300">
                                <template slot-scope="scope"> 
                                    <span>{{scope.row.remark}}</span>      
                                </template>
                            </el-table-column>  
                        </el-table>

Data部分程式碼：

  data: function () {
            return { 
                spanArr:[], 
            };
        },

 

Methods部分程式碼：

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 1) {
                  if(this.spanArr[rowIndex]){
                      return {
                          rowspan:this.spanArr[rowIndex],
                          colspan:1
                      }
                  }else{
                      return {
                          rowspan: 0,
                          colspan: 0
                      }
                  }
              }
          },
          flitterData:function () { 
                    let contactDot = 0;
                    let spanArr = [];
                    $this.value.dataList.forEach((item, index) => {
                        if (index === 0) { 
                            spanArr.push(1)
                        } else {
                            //註釋：systemTypeName  是對應體系,value.dataList 對應table繫結的資料來源
                               if (item.systemTypeName === this.value.dataList[index - 1].systemTypeName) {

                                spanArr[contactDot] += 1;
                                spanArr.push(0)
                            } else {
                                contactDot = index
                                spanArr.push(1)
                            }
                        }
                    })
                    this.spanArr = spanArr;
          }, 

 

在合適的地方呼叫 flitterData方法  即可，我在專案中是獲取資料來源之後呼叫的

 

原文：https://blog.csdn.net/weixin_44202166/article/details/110471420

參考寫法，方式呼叫與原文不同