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

news2024/9/20 14:33:15

提示：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.label" :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',label:'年龄'},
          {key:'gender',label:'性别'},
          {key:'color',label:'幸运色'},
          {key:'hobby',label:'兴趣爱好'},
        ]
        //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.label" :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,label: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.coloradmin.cn/o/1354603.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【langchain】入门初探实战笔记（Chain, Retrieve, Memory, Agent）

【langchain】入门初探实战笔记（Chain, Retrieve, Memory, Agent）

1. 简介 1.1 大语言模型技术栈 大语言模型技术栈由四个主要部分组成&#xff1a; 数据预处理流程&#xff08;data preprocessing pipeline&#xff09;嵌入端点&#xff08;embeddings endpoint &#xff09;向量存储&#xff08;vector store&#xff09;LLM 终端&#xff…
阅读更多...
mac环境下安装部署mysql5.7

mac环境下安装部署mysql5.7

下载安装包 进入官网下载MySQL5.7的安装包 https://www.mysql.com/downloads/ 安装包下载完成后双击pkg文件进行安装&#xff0c;无脑点下一步即可&#xff0c;注意安装完成后记得保存最后弹出框的密码 进入系统偏好设置&#xff0c;找到mysql&#xff0c;开启mysql服务…
阅读更多...
人工智能教程（四）：概率论入门

人工智能教程（四）：概率论入门

目录 前言 TensorFlow 入门 SymPy 入门 概率论入门 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击跳转到网站 在本系列的 上一篇文章 中&#xff0c;我们进一步讨论了矩阵和线性代数&#…
阅读更多...
macbook录屏快捷键大全，教你快速录制视频

macbook录屏快捷键大全，教你快速录制视频

“有人知道macbook电脑有录屏快捷键吗&#xff0c;现在录屏的速度太慢了&#xff0c;每次打开都要浪费不少时间&#xff0c;要是有录屏快捷键&#xff0c;应该会快很多&#xff0c;有哪位大佬知道吗&#xff1f;教教我&#xff01;” 无论是在工作还是生活中&#xff0c;电脑已…
阅读更多...
安卓Android Studio读写FM1208CPU卡源码

安卓Android Studio读写FM1208CPU卡源码

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?spma1z10.5-c-s.w4002-21818769070.11.6c46789elLwMzv&id615391857885 <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout x…
阅读更多...
redis复习笔记02（小滴课堂）

redis复习笔记02（小滴课堂）

分布式缓存Redis6常见核心配置讲解 查看配置文件&#xff1a; 创建配置文件&#xff1a; 配置完我们去验证一下&#xff1a; 启动成功就没有问题了。 可以看到redis日志。 然后我们就可以连接我们的redis了&#xff1a; 设置了密码就需要密码登录了。 如果登录了错误的密码也无…
阅读更多...
C/C++汇编学习（二）——学习使用IDA pro

C/C++汇编学习（二）——学习使用IDA pro

学习使用IDA Pro是一项很有价值的技能&#xff0c;特别是对于那些对逆向工程和软件安全分析感兴趣的人。以下是一些基本步骤和概念&#xff0c;帮助你熟悉IDA Pro的界面和操作。 1. 熟悉IDA Pro界面和基本操作 主界面布局 IDA Pro的主界面包含多个组件&#xff0c;每个组件都…
阅读更多...
静态网页设计——个人简介网站

静态网页设计——个人简介网站

前言 使用经典前端三件套HTMLCSSJavascript编写了一个关于个人简介的静态网页&#xff0c;可以根据自己的需要&#xff0c;十分简单的进行修改。 首页 首页由上方的菜单栏以及菜单栏下面的轮播图组成&#xff0c;再往下走&#xff0c;是关于自己的兴趣爱好的部分&#xff0c…
阅读更多...
UG/NX许可证使用效率提升新技术

UG/NX许可证使用效率提升新技术

UG/NX许可证使用效率提升新技术 UG&#xff08;Unigraphics NX&#xff09;是Siemens PLM Software公司出品的一个产品工程解决方案&#xff0c;它为用户的产品设计及加工过程提供了数字化造型和验证手段。近年来随着国家对知识产品保护的不断加强&#xff0c;以前使用盗版软件…
阅读更多...
vue3+Ts+Hook的方式实现商城核心功能sku选择器

vue3+Ts+Hook的方式实现商城核心功能sku选择器

前言 Hooks是React等函数式编程框架中非常受欢迎的工具&#xff0c;随着VUE3 Composition API 函数式编程风格的推出&#xff0c;现在也受到越来越多VUE3开发者的青睐&#xff0c;它让开发者的代码具有更高的复用度且更加清晰、易于维护。 本文将通过CRMEB商城商品详情sku选择…
阅读更多...
Bee的批量插入与事务使用

Bee的批量插入与事务使用

* Bee 在2.2之前,调用批量插入在每个批都会提交commit,但在2.2改为只调用一次且在事务中,在批量插入的方法内容不再提交,而由事务控制. * * 2.2之前,批量插入使用每一个批次提交一次事务; * 这样,当违反主键约束等就忽略的大批量插入效率是很高的; * 但当事务中有批量插…
阅读更多...
Golang Leetcode19 删除链表的倒数第N个节点 递归 双指针法+迭代

Golang Leetcode19 删除链表的倒数第N个节点 递归 双指针法+迭代

删除链表的倒数第N个节点 leetcode19 递归 由于本体是倒数第几个节点&#xff0c;非常适合递归 从终到始 的运行方式 func removeNthFromEnd(head *ListNode, n int) *ListNode {// 创建一个虚拟头节点&#xff0c;简化边界条件处理dummy : &ListNode{Next: head}//检查…
阅读更多...
【卫星科普】什么是农业一号卫星和农业二号卫星？

【卫星科普】什么是农业一号卫星和农业二号卫星？

农业一号卫星和农业二号卫星是中国自主研发的两颗重要卫星&#xff0c;主要用于农业领域的监测和研究。 农业一号卫星是中国第一颗具备红边波段传感器的卫星&#xff0c;也是世界上第一颗具备红边波段的宽视场多光谱中高分辨率卫星。这对农业农村遥感监测非常重要&#xff0c;…
阅读更多...
阿里云ECS服务器无法访问端口（防火墙在关闭状态也启作用）

阿里云ECS服务器无法访问端口（防火墙在关闭状态也启作用）

问题&#xff1a;一直用得好好的端口&#xff0c;突然在某一时间不可以访问这个端口了 &#xff0c;在服务器录入外网地址访问如下图&#xff1a; 先按正常流程检测&#xff1a; 1 先云服务商的管理网站查看防火墙端口是否开放 看了正常开放了端口&#xff0c;如下图&#xff…
阅读更多...
HTML5-简单文件操作

HTML5-简单文件操作

文件操作 简介 概念&#xff1a;可以通过file类型的input控件或者拖放的方式选择文件进行操作 语法格式&#xff1a; <input type"file" multiple>属性 multiple&#xff1a;表示是否选择多个文件 accept&#xff1a;用于设置文件的过滤类型&#xff08;MI…
阅读更多...
Linux 如何 kill 指定的 python 进程

Linux 如何 kill 指定的 python 进程

文章目录 写在前面一、显示python相关的进程二、找到自己想要 kill 的进程&#xff0c;执行下述指令 写在前面 自己的系统是 Ubuntu 20.04 一、显示python相关的进程 ps -ef | grep python显示结果如下 其中&#xff0c;第二列分别是各个进程的 PID 号。 二、找到自己想要…
阅读更多...
【38 Pandas+Pyecharts | 奥迪汽车销量数据分析可视化】

【38 Pandas+Pyecharts | 奥迪汽车销量数据分析可视化】

文章目录 &#x1f3f3;️‍&#x1f308; 1. 导入模块&#x1f3f3;️‍&#x1f308; 2. Pandas数据处理2.1 读取数据2.2 查看数据信息2.3 数据处理 &#x1f3f3;️‍&#x1f308; 3. Pyecharts数据可视化3.1 奥迪用户购车时间分布3.2 奥迪各系销量占比饼图3.3 奥迪各系销量…
阅读更多...
使用Python和Pygame库创建简单的的彩球效果

使用Python和Pygame库创建简单的的彩球效果

简介 Pygame是一款强大的游戏开发库&#xff0c;可以用于创建各种有趣的图形效果。为了更好地了解Pygame的功能&#xff0c;今天我们将要做的是在屏幕上随机生成一些彩色的小球&#xff0c;并使它们以不同的速度和方向移动。当小球碰到屏幕边缘时&#xff0c;它们将反弹。 功能…
阅读更多...
小型洗衣机哪个牌子质量好？五款最好用的迷你洗衣机品牌

小型洗衣机哪个牌子质量好？五款最好用的迷你洗衣机品牌

不得不说洗衣机的发明解放了我们的双手&#xff0c;而我们从小到大就有这个意识&#xff0c;贴身衣物不可以和普通的衣服一起丢进去洗衣机一起&#xff0c;而内衣裤上不仅有肉眼看见的污渍还有手上根本无法消灭的细菌&#xff0c;但是有一款专门可以将衣物上的细菌杀除的内衣小…
阅读更多...
仓库出入库登记系统的推荐

仓库出入库登记系统的推荐

在信息时代&#xff0c;仓库管理已成为企业不可缺少的一项工作。我们如何高效、准确地管理仓库的进货、出货以及库存&#xff0c;是每个企业或仓管都需要面对的问题。而一个优秀的仓库出入库登记系统&#xff0c;则能够大大提升仓库管理的效率和准确性。本文将为您推荐一款实用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023