zoukankan      html  css  js  c++  java
  • 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
    }
    }
    },

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

  • 相关阅读:
    Best Time to Buy and Sell Stock III
    Valid Palindrome
    Longest Substring Without Repeating Characters
    Copy List with Random Pointer
    Add Two Numbers
    Recover Binary Search Tree
    Anagrams
    ZigZag Conversion
    Merge k Sorted Lists
    Distinct Subsequences
  • 原文地址:https://www.cnblogs.com/dss1025/p/13163441.html
Copyright © 2011-2022 走看看