el-table表格动态添加列。多组数据拼接和多层级数据的处理

提示:el-table表格动态添加列

文章目录

  • 前言
  • 一、多组数据拼接
  • 二、多层级处理
  • 三、实际应用中,为避免闪屏,可以表格数据统一渲染
  • 总结


前言

需求:富文本编辑器

一、多组数据拼接

<template><div class="test"><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><template><el-table-column v-for="item,index in addHeadColumn" :prop="item.key" :label="item.lable" :key="index"></el-table-column></template>  </el-table></div>
</template><script>
export default {name: 'HelloWorld',data () {return {tableData: [{id:1,date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄'}, {id:2,date: '2016-05-04',name: '李四',address: '上海市普陀区金沙江路 1517 弄'}, {id:3,date: '2016-05-01',name: '王五',address: '上海市普陀区金沙江路 1519 弄'}, {id:4,date: '2016-05-03',name: '孙六',address: '上海市普陀区金沙江路 1516 弄'}],customTableData:[],userTableData:[],addHeadColumn:[],}},created(){this.getcustomTableData();},methods:{//获取自定义表头数据getcustomTableData(){this.addHeadColumn = [];this.customTableData = [];//模拟接口调用延时setTimeout(()=>{this.customTableData =[{ id:1,name: '张三',age:16,gender:'女'},{ id:2,name: '李四',age:27,gender:'男'},{ id:3,name: '王五',age:38,gender:'男'},{ id:4,name: '孙六',age:49,gender:'男'}];this.userTableData =[{ id:1,name: '张三',color:'green',hobby:'篮球'},{ id:2,name: '李四',color:'red',hobby:'足球'},{ id:3,name: '王五',color:'blue',hobby:'羽毛球'},{ id:4,name: '孙六',color:'orange',hobby:'乒乓球'}];this.addHeadColumn = [{key:'age',lable:'年龄'},{key:'gender',lable:'性别'},{key:'color',lable:'幸运色'},{key:'hobby',lable:'兴趣爱好'},]//tableData为基础表格数据,定制表头并渲染数据到tableData里let newTableData = [];for(let i=0;i<this.tableData.length;i++){newTableData[i] = this.tableData[i]||{};for(let j=0;j<this.customTableData.length;j++){let customTableDataJ = this.customTableData[j]||{};//当表格数据id相同时  合并数据if(newTableData[i].id == customTableDataJ.id){let obj = {...newTableData[i],...customTableDataJ};newTableData[i] = obj;}}for(let k=0;k<this.userTableData.length;k++){let userTableDataK = this.userTableData[k]||{};//当表格数据id相同时  合并数据if(newTableData[i].id == userTableDataK.id){let obj = {...newTableData[i],...userTableDataK};newTableData[i] = obj;}}}this.tableData = newTableData;},5000);},}
}
</script>

在这里插入图片描述
在这里插入图片描述

二、多层级处理

<template><div class="test"><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><template><el-table-column v-for="item,index in addHeadColumn" :prop="item.key+'Msg'" :label="item.lable" :key="index"></el-table-column></template>  </el-table></div>
</template><script>
export default {name: 'HelloWorld',data () {return {tableData: [{id:1,date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',msg:{age:16,gender:'女',color:'green',hobby:'篮球'}}, {id:2,date: '2016-05-04',name: '李四',address: '上海市普陀区金沙江路 1517 弄',msg:{age:27,gender:'男',color:'red',hobby:'足球'}}, {id:3,date: '2016-05-01',name: '王五',address: '上海市普陀区金沙江路 1519 弄',msg:{age:38,gender:'男',color:'blue',hobby:'羽毛球'}}, {id:4,date: '2016-05-03',name: '孙六',address: '上海市普陀区金沙江路 1516 弄',msg:{age:49,gender:'男',color:'orange',hobby:'乒乓球'}}],customTableData:[],userTableData:[],addHeadColumn:[],}},created(){this.getcustomTableData();},methods:{//获取自定义表头数据getcustomTableData(){this.addHeadColumn = [];this.customTableData = [];//模拟接口调用延时setTimeout(()=>{let matchObj = {age:'年龄',gender:'性别',color:'幸运色',hobby:'兴趣爱好'}let differenceStr = 'Msg';for(let i=0;i<this.tableData.length;i++){let msgObj = (this.tableData[i]||{}).msg||{};for(let key in msgObj){let obj = {key,lable:matchObj[key]}let index = this.addHeadColumn.findIndex(item=>{return item.key == obj.key});if(index<0){this.addHeadColumn.push(obj)}//区分msg里字段与tableData[i]的字段有重复的,加个string区分,el-table-column的prop对应添加:prop="item.key+'Msg'"this.tableData[i][key+differenceStr] = msgObj[key];}}},5000);},}
}
</script>

在这里插入图片描述
在这里插入图片描述

三、实际应用中,为避免闪屏,可以表格数据统一渲染

<template><div class="test"><el-table :data="tableData" stripe style="width: 100%"><!-- <el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column> --><template><el-table-column v-for="item,index in addHeadColumn" :prop="index>2?item.key+'Msg':item.key" :label="item.label" :key="index"></el-table-column></template>  </el-table></div>
</template><script>
export default {name: 'HelloWorld',data () {return {tableData: [],customTableData:[],userTableData:[],addHeadColumn:[],}},created(){this.getcustomTableData();},methods:{//获取自定义表头数据getcustomTableData(){this.addHeadColumn = [];this.customTableData = [];this.addHeadColumn = [{key:'date',label:'日期'},{key:'name',label:'姓名'},{key:'address',label:'地址'},{key:'age',label:'年龄'},{key:'gender',label:'性别'},{key:'color',label:'幸运色'},{key:'hobby',label:'兴趣爱好'}];let responseData = [{id:1,date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',msg:{age:16,gender:'女',color:'green',hobby:'篮球'}}, {id:2,date: '2016-05-04',name: '李四',address: '上海市普陀区金沙江路 1517 弄',msg:{age:27,gender:'男',color:'red',hobby:'足球'}}, {id:3,date: '2016-05-01',name: '王五',address: '上海市普陀区金沙江路 1519 弄',msg:{age:38,gender:'男',color:'blue',hobby:'羽毛球'}}, {id:4,date: '2016-05-03',name: '孙六',address: '上海市普陀区金沙江路 1516 弄',msg:{age:49,gender:'男',color:'orange',hobby:'乒乓球'}}];//模拟接口调用延时setTimeout(()=>{let differenceStr = 'Msg';for(let i=0;i<responseData.length;i++){let msgObj = (responseData[i]||{}).msg||{};for(let key in msgObj){responseData[i][key+differenceStr] = msgObj[key];}}this.tableData = responseData;},5000);},}
}
</script>

在这里插入图片描述
在这里插入图片描述

总结

踩坑路漫漫长@~@

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/592810.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度确定性策略梯度 DDPG

深度确定性策略梯度 DDPG 深度确定性策略梯度 DDPG模型结构目标函数算法步骤适合场景 深度确定性策略梯度 DDPG A2C、A3C 都是在线策略&#xff0c;在与环境交互时&#xff0c;样本参数更新效率低&#xff0c;所以主要是应用在离散空间&#xff0c;计算量没那么大。 DDPG 专用…

「2023年终总结,这就是我的成长见证」有奖征集活动!

2023年已去&#xff0c;2024年已至。总结这一年的成绩&#xff0c;大家都想到了什么呢&#xff1f;是在工作中取得了长足的进步&#xff0c;还是在生活中喜结良缘&#xff1b;是离梦想挥挥手变得更近&#xff0c;还是在现实的道路上更上一层楼。 一叶荣华春秋意&#xff0c;年月…

封装(static的性质、代码块)

目录 前言&#xff1a; 封装&#xff1a; 包&#xff1a; 什么是包&#xff1f; 导入包中的静态方法&#xff1a; 定义包&#xff1a; 访问修饰限定符&#xff1a; private&#xff1a; default&#xff1a; static&#xff1a; static成员变量&#xff1a; sta…

C#(winform)button去掉边框

地址&#xff1a;C#(winform)button去掉各种边框 - 清枫林 - 博客园 (cnblogs.com)

MongoDB CRUD 概述

当本地安装完mongodb数据库后&#xff0c;或拿到一个新的数据库连接字符串时。对于新手来说&#xff0c; 避免不了手痒难耐&#xff0c;想对数据库大肆折腾一番。看到数据库当中存在自己定制化的数据后&#xff0c;心中的成就感油然而生。 本文介绍mongodb简单的crud操作&#…

[UUCTF 2022 新生赛]ez_rce

[UUCTF 2022 新生赛]ez_rce wp 在做这道题时&#xff0c;我参考了这篇博客&#xff1a; https://www.cnblogs.com/bkofyZ/p/17594549.html 认识到了自己的一些不足。 题目代码如下&#xff1a; <?php ## 放弃把&#xff0c;小伙子&#xff0c;你真的不会RCE,何必在此纠…

突显网页设计优势:不可忽视的四项关键要素

网页网站设计要点 一、主题清晰 在明确目标的基础上&#xff0c;完成网站的创意是整体设计方案。定位网站的整体风格和特点&#xff0c;规划网站的组织结构。网站应根据不同的服务对象&#xff08;机构或人员&#xff09;有不同的形式。有些网站只提供简单的文本信息&#xf…

springboot(ssm码头船只货柜管理系统Java系统

springboot(ssm码头船只货柜管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 数据库工具&…

路径搜索算法 A* 算法 和 Dijkstra 算法

A*算法和Dijkstra算法是两种常用的路径搜索算法&#xff0c;用于在图形结构中寻找最短路径。它们都属于单源最短路径算法&#xff0c;可以用于解决各种寻路问题。 A算法是一种启发式搜索算法&#xff0c;同时考虑了实际移动代价和估计距离代价&#xff0c;通过估计代价来指导搜…

C语言操作符(简单解释版)

算术操作符&#xff1a; &#xff1a;用于将两个数值相加。例如&#xff1a;3 5 8。-&#xff1a;用于从一个数值中减去另一个数值。例如&#xff1a;5 - 3 2。*****&#xff1a;用于将一个数值乘以另一个数值。例如&#xff1a;6 * 5 30。/&#xff1a;用于将第一个数值除…

【程序员的自我修养08】精华!!!动态库的由来及其实现原理

绪论 大家好&#xff0c;欢迎来到【程序员的自我修养】专栏。正如其专栏名&#xff0c;本专栏主要分享学习《程序员的自我修养——链接、装载与库》的知识点以及结合自己的工作经验以及思考。编译原理相关知识本身就比较有难度&#xff0c;我会尽自己最大的努力&#xff0c;争…

穷举vs暴搜vs深搜vs回溯vs剪枝

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; 目录 &#x1f449;&#x1f3fb;全排列&#x1f449;&#…

微信小程序使用echarts报错 ReferenceError: Image is not defined 解决

报错 ReferenceError: Image is not defined 在用uni-app开发微信小程序时&#xff0c;使用到了echarts&#xff08;V4.6.0&#xff09;配置项中的icon属性&#xff0c;微信开发者工具报错如下&#xff1a; 定位问题 定位问题到了压缩echarts文件中的new Image 使用非压缩…

Java解决字典序最小回文串

Java解决字典序最小回文串 01 题目 给你一个由 小写英文字母 组成的字符串 s &#xff0c;你可以对其执行一些操作。在一步操作中&#xff0c;你可以用其他小写英文字母 替换 s 中的一个字符。 请你执行 尽可能少的操作 &#xff0c;使 s 变成一个 回文串 。如果执行 最少 操…

电商API连接升级:飞书集成助力营销系统

无代码开发的连接优势 在数字化时代&#xff0c;电商平台不断寻求创新的方法来提升业务效率和客户体验。无代码开发的连接优势正是飞书审批带给电商行业的一大福音。通过简化集成过程&#xff0c;飞书审批允许企业无需深入复杂的编程技术&#xff0c;即可实现系统间的高效连接…

【LabVIEW FPGA入门】创建第一个LabVIEW FPGA程序

本教程仅以compactRIO&#xff08;FPGA-RT&#xff09;举例 1.系统配置 1.1软件安装 FPGA-RT 1. LabVIEW Development System (Full or Professional) 2. LabVIEW Real-Time Module 3. LabVIEW FPGA Module 4. NI-RIO drivers 1.2硬件配置 1.使用线缆连接CompactRIO至主机…

解决json.decoder.JSONDecodeError: Extra data: line 1 column 721 (char 720)问题

python中将字符串序反列化成json格式时报错 fn result_json[0].decode(utf-8).strip(\00) json_object json.loads(fn) print(type(json_object))排查了以下原因应该是序列化的字符串全都在一行&#xff0c;json库不能一次性处理这么长的序列

jsavascript

JavaScript获取当前时间 效果图当前时间 效果图 当前时间 var now new Date();var year now.getFullYear();var month (now.getMonth() 1) <10 ? "0"(now.getMonth() 1) : (now.getMonth() 1);var day now.getDate() <10 ? "0"now.getDate() :…

【Linux 内核源码分析】GPIO子系统软件框架

Linux内核的GPIO子系统是用于管理和控制通用输入输出&#xff08;GPIO&#xff09;引脚的软件框架。它提供了一套统一的接口和机制&#xff0c;使开发者能够方便地对GPIO进行配置、读写和中断处理。 主要组件&#xff1a; GPIO框架&#xff1a;提供了一套API和数据结构&#x…

安卓作业001 - 显示学生信息

文章目录 安卓作业001 - 显示学生信息一、界面设计思路二、涉及知识点概览三、实现步骤详解四、启动应用&#xff0c;查看结果五、任务完成总结 安卓作业001 - 显示学生信息 显示学生详细信息要求更改应用图标及标 题要求设置窗口背景图片 一、界面设计思路 在本次安卓作业0…