Element UI Table合并行

小半 • 2023年9月2日下午10:14 • 微信精选 • 阅读 499

Vue使用Element-ui Table 合并行，官方只是一个非常简单的合并例子，通常业务都是相同的某个字段进行合并。

效果图

代码实现

1、Table

<el-table :data="dataTable" border :header-cell-style="{background: '#FAFAFA', textAlign:'center'}" 
       :show-summary="true"
       :span-method="objectSpanMethod"
       sum-text="总计"
       style="width: 100%">
      <el-table-column prop="distribution" label="分配维度" align="center"></el-table-column>
      <el-table-column prop="seatName" label="坐席姓名" align="center"></el-table-column>
      <el-table-column prop="distributionRatio" label="分配比例（%）" align="center">
           <template scope="scope">
             <el-input-number v-model="scope.row.distributionRatio" controls-position="right" size="small" :min="1" :max="100"></el-input-number>
           </template>
       </el-table-column>
       <el-table-column prop="thisAssignment" label="本次指派任务" align="center"></el-table-column>
       <el-table-column prop="totalTasks" label="总计任务量" align="center"></el-table-column>
       <el-table-column prop="maxTasks" label="上限任务量" align="center"></el-table-column>
       <el-table-column prop="checkStatus" label="校验说明" align="center"></el-table-column>
</el-table>

2、定义变量

data(){
   return{
      dataTable: [],
      spanArr: [],
      position: 0,
   }
},

3、合并方法

在table组件中，提供了一个属性:span-method,它是一个Function，本身有4个参数，分别是row,rowIndex,colum,columIndex;这四个值可以直接拿到。先处理连续相同的列的值，做标记，然后，在合并的方法中，根据我们处理好的数组，去对应的合并行或列。

3.1、处理数据

mounted(){
  this.onMergeLines();
},

onMergeLines(){
   this.dataTable.forEach((item, index) => {
       if (index === 0) {
           this.spanArr.push(1);
           this.position = 0;
       } else {
          // 判断当前元素与上一个元素是否相同
          if (this.dataTable[index].distribution === this.dataTable[index - 1].distribution) {
              this.spanArr[this.position] += 1;
              this.spanArr.push(0);
           } else {
              this.spanArr.push(1);
              this.position = index;
           }
      }
   })
},

3.2、objectSpanMethod

objectSpanMethod({row,column,rowIndex,columnIndex}) { 
   if (columnIndex === 0) {
       const _row = this.spanArr[rowIndex];
       const _col = _row > 0 ? 1 : 0;
       return {
          rowspan: _row,
          colspan: _col
       };
   }
},

4、测试数据

this.ruleTable = [
       {distributionId:'1',distribution:'测试1',seatName:'张三',distributionRatio:25,thisAssignment:'23',totalTasks:90,maxTasks:100,checkStatus:'正常'},
       {distributionId:'1',distribution:'测试1',seatName:'张三',distributionRatio:25,thisAssignment:'23',totalTasks:80,maxTasks:200,checkStatus:'正常'},
       {distributionId:'2',distribution:'测试2',seatName:'张三',distributionRatio:25,thisAssignment:'31',totalTasks:14,maxTasks:100,checkStatus:'正常'},
       {distributionId:'2',distribution:'测试2',seatName:'张三',distributionRatio:25,thisAssignment:'12',totalTasks:52,maxTasks:100,checkStatus:'超额'}
]