首页 > 其他分享 >el-table合并某个字段相同的项

el-table合并某个字段相同的项

时间:2023-01-10 20:45:13浏览次数:40  
标签:el span index 合并 spanOneArr push 某个 table

1、el-table添加span-method

<el-table :data="table_data" id="out-table" :span-method="objectSpanMethod" style="width: 100%">
...
</el-table>

2、合并的方法

  // 合并
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) {
    const _row = this.flitterData(this.table_data).one[rowIndex]
    return {
     rowspan: _row,
     colspan: 1,
    }
   }
  },
  // 合并方法
  flitterData(arr) {
   let spanOneArr = [],
    spanTwoArr = [],
    concatOne = 0
   arr.forEach((item, index) => {
    if (index === 0) {
     spanOneArr.push(1)
     spanTwoArr.push(1)
    } else {
     // 只需要将 span_name 修改为自己需要合并的字段名即可
     if (item.span_name === arr[index - 1].span_name) {
      //第一列需合并相同内容的判断条件
      spanOneArr[concatOne] += 1
      spanOneArr.push(0)
     } else {
      spanOneArr.push(1)
      concatOne = index
     }
    }
   })
   return {
    one: spanOneArr,
   }
  },

 ps:借鉴别人的,但是链接找不到了,原作者看到的话见谅一下...

标签:el,span,index,合并,spanOneArr,push,某个,table
From: https://www.cnblogs.com/lyt520/p/17041325.html

相关文章

  • VS调试release程序
    按如下设置vs工程属性:cmake生成带调试信息的release工程set(CMAKE_CXX_FLAGS_RELEASE"$ENV{CXXFLAGS}-Od-Wall")set(CMAKE_CXX_FLAGS"${CMAKE_CXX_FLAGS......
  • excel的学习6
    格式化表格是一种突出我们想要的数据的一种方式具体操作第一步:选中要操作的列第二步:找到开始栏中的条件格式(如下图所示)第三步:点开条件格式我们可以看到很多的选项,我......
  • SpringBoot-04-thymeleaf模板
    目录前言一、什么是模板引擎?二、引入thymeleaf依赖三、thymeleaf语法1.基础功能:传值取值2.转义字符串为标签3.for-each遍历功能前言参考自:https://www.cnblogs.com/hell......
  • electron-builder常见问题汇总
    ##electron-updater下载无进度问题突然某一次更新download-progress事件不触发了下载进度显示了,直到下载结束触发`update-downloaded`事件开始以为是electron-b......
  • electron-builder双击文件打开关联应用(文件关联)
    [参考文章](https://blog.csdn.net/jingjingchen1014/article/details/121223905)##配置文件关联[官方配置文档](https://www.electron.build/configuration/configu......
  • POJ - 3687 Labeling Balls
    POJ-3687LabelingBalls题解:反向建边+拓扑排序先来简单讲一下题意:我们把重量1-N的小球贴上标签,题目给出的输出a->b,就代表贴着标签a的小球必须比贴着标签b的小球轻,最......
  • Selenium多浏览器处理
    实战演示Python版本#导入依赖importosfromseleniumimportwebdriverdeftest_browser():#使用os模块的getenv方法来获取声明环境变量browserbrowser=os.geten......
  • Office - Excel - 数据透视表 Pivot Table
     一、透视表数据源可以通过Excel直接去链接数据库(需要公司本身支持才行)也可以把需要分析的数据,从数据库中直接拷贝出来--这里演示的是这一种: 将结果集,放在一个ta......
  • 【shell】shell字符串分割|文件分割|剪切|截取 (转)
    目录一、字符串分割1、awk分割2、利用shell中变量的字符串替换成空格分割3、设置分隔符,通过IFS变量4、利用tr指令实现字符替换二、文件分割按行切割按时间切......
  • centos获取系统信息以及系统调优的shell脚本
    #!/bin/bash#2022-08-31#已在在centos7系统下完成测试,获取系统信息和参数调优#Madmaninfo(){echo"+--------------------------------------------------------......