Element UI Table合并行

￡神魔★判官ぃ 2023-01-14 11:59 153阅读 0赞

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

### 效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70_pic_center]

### 代码实现 ###

#### 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:'超额'}
     ]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/d7cf63055ce84f63b3af18ab0717f597.png