您现在的位置是:首页 > 正文

基于element-ui的table实现树级表格操作及单元格合并

2024-01-30 21:35:21阅读 0

如题,公司业务需求,数据结构比较复杂,需要在一张表内实现多级树状数据展示及同属性的单元格合并,并在表格内实现增删改操作。

网上翻阅了很多实例,没有能解决所有需求的案例,于是自己实现了一套。

时间匆忙,逻辑有优化的地方还请无偿指出!

最终效果如下

image

图上,编码有父子层级,每个编码可包含多个交付阶段,每个交付阶段可包含多个文件,每个文件可添加不同文档项次

实现总结如下

一. 结构调整

首先跟后台确认了数据结构,根据右侧最详细内容为基准,以单层数组返回(以编码树级返回更好)。获取到数据后封装为树级数据。保证最详细处表格每一行都对应一条数据。如图示,忽略为展开子级数据,则图上一共对应七条数据。

其中,每个数据对象带有三个属性:code_cnt(每条编码下对应的第三部分行数)、stage_cnt(每个编码下的交付阶段对应的第三部分行数)、file_cnt(每个文件对应的第三部分行数)。后面用于表格合并。

  1. 封装完数据或直接获取到父子层级后,因存在多条数据同一编码,每条数据下都有相同children数据存在,所以需删除多余children,保留一条。又因展开时需展示在相同编码下方,所以需保存相同编码最后一条数据的children字段。如图上所示,X-R1.1.4编码有三条数据,应只保留项次编码为-D3.2.2的children数据,以保证点击展开子级时子层级展示在三条数据下方。
// 当同一编码多条数据且有children时,保留最后一级children
    deleteChildren(data) {
   
      for (let i = 0; i < data.length; i++) {
   
        if (data[i].children && data[i].children.length) {
   
          data[i].hasChild = true;  // 后续解释
          if ( data.some( (item, index) => index > i && item.code_id === data[i].code_id ) ) {
   
            delete data[i].children;
          } else {
   
            data[i].children = this.deleteChildren(data[i].children);
          }
        }
      }
      return data;
    }
  1. 因相同编码、相同阶段、相同文件需合并,所以需要递归标识出每个相同编码、阶段、文件的首条数据,以满足后续单元格合并需求。
// 单元格需合并时,标记首条数据
    dealDataBefore(data) {
   
      let id = "",  stage = "",  file = ""; 
      for (let i = 0; i < data.length; i++) {
   
        if (!id || id !== data[i].interface_item_code) {
   
          // 第一条
          id = data[i].interface_item_code;
          data[i].isFirstLine = true;  // 标识编码首条数据
          stage = data[i].stage_keyid;
          data[i].isFirstStage = true;  // 标识阶段首条数据
          file = data[i].deliver_file_template_id;
          data[i].isFirstFile = true;  // 标识文件首条数据
        } else {
   
          if (!stage || stage !== data[i].stage_keyid) {
   
            stage = data[i].stage_keyid;
            data[i].isFirstStage = true;
            file = data[i].deliver_file_template_id;
            data[i].isFirstFile = true;
          } else {
   
            if (!file || file !== data[i].deliver_file_template_id) {
   
              file = data[i].deliver_file_template_id;
              data[i]

网站文章

  • 差分算法(用python语言实现)

    差分算法,易上手

    2024-01-30 21:35:14
  • 《美图数据统计分析平台架构演进》阅读有感

    《美图数据统计分析平台架构演进》阅读有感

    《美图数据统计分析平台架构演进》阅读有感数据统计是一个比较尴尬的事情,第一个它可能不是一个非常有技术含量的事情,对于技术人员的成长来说不是非常好。第二它可能是一个比较重复工作的事,需要解决一些简单的需求的重复工作。统计业务与技术碰撞这基本上是我自己亲身的经历,刚开始一个人做这一块的业务,会碰到一些有意思的点,可能分三个阶段,第一个阶段是在项目的初期,我们是怎么样去应对一些产品的初期需求...

    2024-01-30 21:34:45
  • unity 3.6在import package时只有custom package

    unity 3.6在import package时只有custom package

    【问题描述】下载的unity 3.6在import package时只有custom package没有其他包文件【解决方案】在asset store里搜索Standard Assets选择导入即可导入完成后在左下角的project assets中多了一个Standard Assets文件夹打开即可使用...

    2024-01-30 21:34:37
  • LLCC68寄存器模式开发-几个关键操作说明

    LLCC68寄存器模式开发-几个关键操作说明

    llcc68 lora模式寄存器说明

    2024-01-30 21:34:29
  • RxJava 两种生产和消费模式,(冷)cold和(热)hot

    RxJava目前有两种发布和订阅模式。

    2024-01-30 21:34:23
  • (pytorch进阶之路)四种Position Embedding的原理及实现

    (pytorch进阶之路)四种Position Embedding的原理及实现

    定义子函数,获得每个window中两两patch之间二维的位置偏差,使用torch.meshgrid函数,根据x轴和y轴范围得到网格每个点的x坐标和y坐标,将其堆叠,获取任何两个点之间的横轴与纵轴坐标...

    2024-01-30 21:33:56
  • otter学习 | canal和otter的关系? 热门推荐

    otter学习 | canal和otter的关系? 热门推荐

    在回答这问题之前,首先来看一张canal&amp;otter和mysql复制的类比图: mysql的自带复制技术可分成三步: master将改变记录到二进制日志(binary log)中(这些记录叫做二进制日志事件,binary log events,可以通过show binlog events进行查看); slave将master的binary log events拷贝到它的中继日志(...

    2024-01-30 21:33:49
  • 设计模式(19)命令模式

    设计模式(19)命令模式

    1、定义:命令模式(Command Pattern)是一种行为设计模式,它将请求封装为一个对象,从而使你可以使用不同的请求对客户端进行参数化。(2)具体命令类(Concrete Command):实现...

    2024-01-30 21:33:42
  • 自定义线程池

    自定义线程池

    一:参数分析 我们要想自定义线程池,必须先了解线程池的工作流程,才能自己定义线程池。下图是ThreadPoolExecutor的构造方法。 我们可以通过下面的场景理解ThreadPoolExecuto...

    2024-01-30 21:33:13
  • MobaXterm登录密码重置问题

    MobaXterm登录密码重置问题

    登录MobaXterm提示输入密码,密码输入多次后无果,密码忘记如法使用MobaXterm软件,经过查询后可采用密码重置的方式处理。使用浏览器打开如下网址:https://mobaxterm.moba...

    2024-01-30 21:33:04