当前位置: 首页 > article >正文

el-table表格数据处理,列表将变更前数据放置在前面,变更后数据放在表格后面

注意:这里的表格前后,指的是表格数据的前几行以及后面行

首先数据获取后,对数据进行拆分处理,我这边使用了一个isEdit的参数区分是变更前还是变更后的数据

<el-table
            ref="table"
            :data="val.tableData"
            style="width: 100%; margin: 0 auto; font-size: 14px"
            height="100%"
            align="center"
            :row-key="(row, index) => index"
            :row-class-name="tableRowClassName"
            :cell-class-name="tableCellClassName"
            :header-cell-style="{ background: '#F5F7FA', height: '30px' }"
            @cell-click="handleCellClick"
            @cell-dblclick="tabClick"
          >

            <el-table-column
              v-for="(item, index) in viewColumnsTwo"
              :key="index"
              :fixed="item.fixed"
              :prop="item.prop"
              :align="item.align"
              :label="item.label"
              :min-width="item.width"
              :show-overflow-tooltip="true"
              class="after_class"
             />
</el-table>

      viewColumnsTwo: [
        { prop: 'topSymptom', width: '120', align: 'center', label: '事项', fixed: false },
        { prop: 'controlItem', width: '120', align: 'center', label: '管理项', fixed: false },
        { prop: 'controlStandard', width: '120', align: 'center', label: '管理基准', fixed: false },
        { prop: 'remark', width: '120', align: 'center', label: '备注', fixed: false }
      ],

//数据返回的是topSymptomAfter、topSymptomBefore这样的数据,所以展示的时候要把数据拆分出来 再显示
//c数组是一个大包含项,tableData才是我所需要的表格数据,我这边是多个表格,所以循环处理了     
  c.forEach(page => {
          page.tableData = page.tableData.map(data => ({
            ...data,
            // 合并 After 和 Before 数据
            topSymptom: {
              before: data.topSymptomBefore,
              after: data.topSymptomAfter
            },
            controlItem: {
              before: data.controlItemBefore,
              after: data.controlItemAfter
            },
            controlStandard: {
              before: data.controlStandardBefore,
              after: data.controlStandardAfter
            },
            remark: {
              before: data.remarkBefore,
              after: data.remarkAfter
            }
          }))
        })
        const newCTble = c // 拆分出的before和After数据,按照这个再次去拆分 组合
        newCTble.forEach(page => {
          const mapRows = (item, isEdit) => ({
            ...item,
            topSymptom: isEdit ? item.topSymptom.after : item.topSymptom.before,
            controlItem: isEdit ? item.controlItem.after : item.controlItem.before,
            controlStandard: isEdit ? item.controlStandard.after : item.controlStandard.before,
            remark: isEdit ? item.remark.after : item.remark.before,
            isEdit
          })

          const beforeRows = page.tableData.map(item => mapRows(item, false))
          const afterRows = page.tableData.map(item => mapRows(item, true))

          // 合并并更新 tableData
          page.tableData = [...beforeRows, ...afterRows]
        })
        this.allList = newCTble //newCTble数据 是最后获取的拼接好 要展示的数据


http://www.kler.cn/news/360206.html

相关文章:

  • 第1篇:计算机网络概述与基础
  • 【小白学机器学习15】 概率论的世界观
  • Web,RESTful API 在微服务中的作用是什么?
  • 【修订中】ffmpeg 知识点
  • 从传统到智能,从被动监控到主动预警,解锁视频安防平台EasyCVR视频监控智能化升级的关键密钥
  • 【小程序】-基础语法(二)
  • Netty初体验-1-NIO基础补漏
  • 域渗透之 内网穿透 隧道技术聊聊看 环境搭建 regeorg技术 proxifier联合使用 一步步让你明白如何玩转隧道技术 含对应软件下载
  • Yolo目标检测:实时性与准确性的完美结合
  • 一文2500字从0到1实现压测自动化!
  • 宠物用品电商网站:SpringBoot框架设计与开发
  • 回忆Web编程的岁月变迁
  • Anchor DETR论文笔记
  • Docker私有仓库部署与管理
  • 【含开题报告+文档+PPT+源码】基于SpringBoot电脑DIY装机教程网站的设计与实现
  • FairGuard游戏加固全面适配纯血鸿蒙NEXT
  • 机器人如何强化润滑与维护,减少关节磨损?
  • 如何通过 systemd 确保服务自动重启:以 java-test 服务为例
  • 计算机网络:数据链路层 —— 交换式以太网
  • 《面向对象系统分析与设计》三级项目