• element-ui 表格数据根据某一列值相同进行行合并(包括序号列)并同列相同值进行合计


    效果图

    需求后台返回jsonarr数组后,根据姓名值一直行进行合并,同时序号列合并,并计算当前人的各个项目耗时总和。

     实现思路:data中定义多个数组用于存放数据,包括

    items: [],//序号,含冗余行
    personWorkload: [],//个人合计
    tableData: [],//table 数据显示在最终页面上数据
    originalData: [],//table的备份数据 后台返回值直接赋值给备份数据
    manageArr: [],//项目经理要合并的数组
    managePos: 0,//项目经理要合并的数组的序号

     在获取后台返回值方法中直接赋值给存放备份表格数据的数组,然后调用merage()方法进行每条数据过滤,然后把过滤组装数据放入tabledata数组中,显示在页面上,重写indexMethod方法进行序号自定义,返回项目经理耗时合计也在过滤每条数据时累计。

    最终关键代码

    merage() {//每行数据过滤
    //要合并的数组方法
    this.tableData = this.originalData; //每次过滤之前都要把筛选之前的tableData重置
    this.manageArr = [];
    this.personWorkload=[];
    this.items=[];
    var cout = 1;//相同的序号
    var perwl = 0;//个人合计
    for (var i = 0; i < this.tableData.length; i++) {
    //第一行必须存在
    if (i === 0) {
    this.manageArr.push(1);
    this.managePos = 0;
    this.items.push(1);
    perwl = parseFloat(this.tableData[i].workLoad);

    } else {
    //判断当前元素与上一个元素是否相同,managePos是manageArr内容的序号
    if (this.tableData[i].perName === this.tableData[i - 1].perName) {
    this.manageArr[this.managePos] += 1;
    this.manageArr.push(0);
    perwl += parseFloat(this.tableData[i].workLoad);
    } else {
    this.personWorkload.push(perwl);//当前值与上一个值不同,把上一个经理的累计耗时放入数组
    perwl = parseFloat(this.tableData[i].workLoad);//累计值清0
    cout++;//若不同则不需要合并行,cout+1。否则需要合并行,count不变
    this.manageArr.push(1);
    this.managePos = i;
    }
    this.items.push(cout);//不管需不需要合并都存放在原数组长度
    }
    if (i === this.tableData.length - 1) {
    //如果是最后一行数据,需要特殊处理加入数组
    this.personWorkload.push(perwl);
    }
    }
    //关于每个人的合计耗时
    // 1, 1, 2, 3, 4, 5, 5, 5, 5, 6, 6, 7, 8]----this.item中数据,含有冗余占位
    //[26, 0, 1, 3.25, 32.625, 0, 12.5, 30.75---this.personWorkload数据,不含冗余,每个项目经理的合计值
    //[26,26,0, 1, 3.25, 32.625,32.625,32.625,32.625, 0, 0, 12.5, 30.75] ---最终要行成的数据值
    //填充冗余,若上层数组中序号相同,则合计数组中最后一个相同序号的数组赋值所有相同序号的值
    //splice从指定位置插入数组 索引,删除个数,插入值
    for (var j = 0; j < this.items.length; j++) {
    if (this.items[j] === this.items[j + 1]) {
    this.personWorkload.splice(j + 1, 0, this.personWorkload[j]);
    }
    }


    },
    //自定义序号
    indexMethod(index) {
    //this.items [1, 1, 2, 2] 代表第1行,第2行,需要合并,第三行和第四行需要合并,
    //indexMethod方法只循环合并后的次数,比如筛选后有6行,但是后台原始数据有10行,只循环6次,index表示合并前的索引值,
    // 利用数组中自动补齐 合并行冗余数据根据索引值取值
    //return 返回页面中
    //最后一列个人合计行,,在冗余数组中取数据
    this.tableData[index].sumWorkload = this.personWorkload[index];

    return this.items[index];//返回值序号
    },
    //合并行 原则上保存每个需要合并数据的首行,然后删除其余行重复数据
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
    //只有第1,2,7列进行合并
    if (columnIndex === 0 || columnIndex === 1 || columnIndex === 6) {
    //序号 姓名,投入总人天都需要根据项目经理合并
    const _row_1 = this.manageArr[rowIndex];
    const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
    return {
    rowspan: _row_1,
    colspan: _col_1
    }
    }
    },

    -----一个后台程序员的前端实现,如有更好实现方案,请交流,谢谢!

  • 相关阅读:
    寻找我编程道路的明灯
    Torque2D MIT 学习笔记(7) TAML的使用
    Torque2D MIT 学习笔记(4) 脚本语法(2)
    C++输入/输出流
    设计模式之命令模式
    设计模式之策略模式
    Torque2D MIT 学习笔记(11) 资源管理(3)
    C++文件处理
    Torque2D MIT 学习笔记(2) 目录结构
    设计模式之观察者模式
  • 原文地址:https://www.cnblogs.com/dss1025/p/13163441.html
Copyright © 2020-2023  润新知