el-table动态添加列_el-table 动态列-优快云博客

本文链接：https://blog.youkuaiyun.com/denglouhen/article/details/115372285

本文介绍如何在Vue.js项目中使用ElementUI实现表格动态添加列的功能。内容包括从后端获取JSON字符串解析成动态列，遍历custom字段生成列，DOM渲染动态列，以及添加和删除列的操作。最后，展示了处理数据生成后端所需的custom JSON字符串的代码，以实现高可配置性的表格功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发管理系统过程中碰到一些需求，针对表格，运营人员需要自己添加一些列，然后输入内容保存，以此来实现产品的高可配性，接下来我们就来实现这个功能。

对于这些动态添加的列，后端用JSON字符串的形式存储起来最为方便，这里我们假定存储在custom字段中，例如：custom: "{\"测试\": 1}" 这种形式。

所以我们的el-table中，一部分为固有表头字段，而动态列则通过数组循环生成。

1、首先假设返回的表格数据为：

tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
           custom: ""
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
           custom: "{\"测试\": 1}"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
           custom: "{\"测试\": 1, \"字段2\": \"哈哈哈\"}"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          custom: "{\"测试\": 1}"
        }
],

这里我们要遍历custom字段得到到底有哪几个动态列，并将字符串转为JSON对象，所以拿到数据后我们要处理一下：

this.tableData.forEach(item=>{
      if(item.custom){
        item.custom = JSON.parse(item.custom);
        Object.keys(item.custom).forEach(key => {
          if(this.propArr.indexOf(key) === -1){
            this.propArr.push(key);