当前位置: 首页 > 知识库问答 >
问题:

javascript - el-tabl数据合并问题?

阎坚成
2024-02-29

el-table合并数据问题,如下图,我现在实现的效果:

但是按我现在实现的话有个问题,只要有相同值就能合并。

而实际要求是:其他列有相同值正常合并,如果诉求类型里面有相同的类型值合并了,诉求利用率才能参与合并,但如果此时诉求利用率没有相同值也不合并。同理细分类型和细分利用率一样道理

请教大家怎么优化一下完成我这一需求。

我分装合并方法:

/**     * prop 属性名     * rowIndex:行索引值     */    mergeCol(prop, rowIndex) { // 合并单元格      var idName = this.tableData[rowIndex][prop] // 获取当前单元格的值      if (rowIndex > 0) { // 判断是不是第一行        if (this.tableData[rowIndex][prop] != this.tableData[rowIndex - 1][prop]) { // 先判断当前单元格的值是不是和上一行的值相等          var i = rowIndex; var num = 0 // 定义一个变量i,用于记录行索引值并进行循环,num用于计数          while (i < this.tableData.length) { // 当索引值小于table的数组长度时,循环执行            if (this.tableData[i][prop] === idName) { // 判断循环的单元格的值是不是和当前行的值相等              i++ // 如果相等,则索引值加1              num++ // 合并的num计数加1            } else {              i = this.tableData.length // 如果不相等,将索引值设置为table的数组长度,跳出循环            }          }          return {            rowspan: num, // 最终将合并的行数返回            colspan: 1          }        } else {          return {            rowspan: 0, // 如果相等,则将rowspan设置为0            colspan: 1          }        }      } else { // 如果是第一行,则直接返回        let i = rowIndex; let num = 0        while (i < this.tableData.length) { // 当索引值小于table的数组长度时,循环执行          if (this.tableData[i][prop] === idName) {            i++            num++          } else {            i = this.tableData.length          }        }        return {          rowspan: num,          colspan: 1        }      }    },

组件span-method方法:

// 合并列    objectSpanMethod({ row, column, rowIndex, columnIndex }) {      switch (columnIndex) { // 将列索引作为判断值      // 通过传递不同的列索引和需要合并的属性名,可以实现不同列的合并        case 0:          return this.mergeCol('date', rowIndex)        case 1:          return this.mergeCol('staff', rowIndex)        case 2:          return this.mergeCol('sum_utilization_rate', rowIndex)        case 3:          return this.mergeCol('appeal_type', rowIndex)        case 4:          return this.mergeCol('appeal_type_utilization_rate', rowIndex)        case 5:          return this.mergeCol('detail_appeal_type', rowIndex)        case 6:          return this.mergeCol('detail_appeal_type_utilization_rate', rowIndex)      }    },

共有2个答案

山森
2024-02-29

在从接口获取到 tableData 数据后, 假设每列数据都是排序过的, 对其进行数据清洗 (这才是你实现需求需要处理的), 大概是以下步骤:

  1. 第一次出现的值标记为 isMerge = false, 需要被合并的行设置 isMerge = true 标记位
  2. 根据 isMerge: [false, false) 记录 appeal_typedetail_appeal_type 的合并行的索引范围
  3. 特殊处理 appeal_type_utilization_ratedetail_appeal_type_utilization_rate 数据时根据 2. 记录的索引范围, 对值进行求和记为 sum, 并将索引范围内每一行的该列的值设置为 sum, 并将每行的 isMerge 字段设置正确

清洗好数据后设置正确的 :span-method=objectSpanMethod 并编写 objectSpanMethod: 根据 isMerge 字段合并单元格即可

function objectSpanMethod({ rowIndex }) {    const currentData = this.tableData[rowIndex];    if (!currentData.isMerge) {      return {        rowspan: 1,        colspan: 1,      };    }    return {      rowspan: 0,      colspan: 1,    };}
仰翰采
2024-02-29

这个问题可以通过调整合并单元格的方法来解决。目前的实现中,你是在比较每一行与其上一行的对应单元格值是否相同,如果相同则不合并,这导致了你所描述的问题。

你需要修改合并方法,使其在比较时不仅考虑当前行和上一行的值,还要考虑前两行的值。这样,只有当1和3列的值相同时,2和4列才会合并。如果2和4列没有相同的值,即使1和3列的值相同也不会合并。

这是一个可能的解决方案:

mergeCol(prop, rowIndex) {  var idName = this.tableData[rowIndex][prop];  var prevRow = this.tableData[rowIndex - 1];  var prevPrevRow = this.tableData[rowIndex - 2];  if (rowIndex > 1) {    if (idName === prevRow[prop] && prevRow['yourThirdColumnProperty'] === prevPrevRow['yourThirdColumnProperty']) {      // 这里需要一个变量来记录已经找到了多少行具有相同的值      var i = rowIndex;      var num = 0;      while (i < this.tableData.length) {        if (this.tableData[i][prop] === idName && this.tableData[i]['yourThirdColumnProperty'] === prevRow['yourThirdColumnProperty']) {          i++;          num++;        } else {          i = this.tableData.length;        }      }      return {        rowspan: num,        colspan: 1      }    } else {      return {        rowspan: 0,        colspan: 1      }    }  } else { // 如果是第一行,则直接返回    let i = rowIndex;    let num = 0;    while (i < this.tableData.length) {      if (this.tableData[i][prop] === idName && this.tableData[i]['yourThirdColumnProperty'] === prevRow['yourThirdColumnProperty']) {        i++;        num++;      } else {        i = this.tableData.length;      }    }    return {      rowspan: num,      colspan: 1    }  }},

请注意,你需要将 'yourThirdColumnProperty' 替换为你实际需要比较的第三列的属性名。另外,你可能还需要对代码进行一些调整,以适应你的具体需求和数据结构。

 类似资料:
  • el-table 如何根据表格数据合并行。 如图所示,name列的值一样,就合并成一行;Amount 1列合并成3行 演示地址

  • a=[78,187,30] b=[78,186,185,25,30] c=[78,187,186,185,25,30] //想获得的结果 a=[1,2,3,4,5] b=[1,6,7,8,3,9,5] c=[1,2,6,7,8,3,4,9,5] //想获得的结果 a、b数组里面的值都是唯一的,怎么用js获得想要的值呢? 问了ChatGPT都没解决,它给的方法在控制台输出结果不一致,因为chatGP

  • 要求el-input输入的值是数字数组形式:[123,123],组件定义的value是string类型,所以在查询的时候需要对input输入的值进行转换。 我的处理方式: handleFormFormat方法是处理动态表单数据格式化的: 什么条件不输的时候查出的结果打印: 输入数字后查询打印结构(显示数据处理过后的): 但是network传的值却没有改变,还是字符串形式的: 求助大佬提点一下,哪里

  • 主要内容:Oracle MERGE语句简介,Oracle MERGE示例在本教程中将学习如何使用Oracle 语句来执行更新或基于指定条件插入数据。 Oracle MERGE语句简介 Oracle 语句从一个或多个源表中选择数据并更新或将其插入到目标表中。 语句可指定一个条件来确定是更新数据还是将数据插入到目标表中。 以下说明了Oracle 语句的语法: 下面来仔细看看上面语句的语法: 首先,指定要在子句中更新或插入的目标表()。 其次,指定要更新或插入子句中的数据源

  • 数据结构如下 tabledata: [ 效果图 能否实现这样的效果呢

  • 问题内容: 我有一个像这样的JavaScript数组: 我将如何将单独的内部数组合并为一个类似的数组: 问题答案: 您可以使用合并数组: 使用of方法将仅将第二个参数作为数组,因此最后一行与此相同: 还有一种方法(在ES2019中引入)可用于展平阵列,尽管该方法仅在从版本11开始的Node.js中可用,而在Internet Explorer中完全不可用。