Element UI Table合并行

最新推荐文章于 2024-08-30 09:35:19 发布

tansci

最新推荐文章于 2024-08-30 09:35:19 发布

阅读量1.4k

点赞数

分类专栏： vue JS 文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/typ1805/article/details/115914442

版权

JS 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue

9 篇文章 2 订阅

订阅专栏

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