vue中el-table动态添加表头

已于 2024-08-07 00:24:00 修改
阅读量324 收藏
点赞数 1
文章标签： javascript 前端 vue.js
于 2024-08-07 00:15:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/geng97280/article/details/140968981
版权

在vue开发中使用el-table组件，默认有五个表头，根据接口返回的对接上默认的五个表头字段后，还需要根据接口增加表头要怎么做呢？废话不多说，开整……

例如后端返回的数据格式：

skuInfoDTOS: [
        {
          skuId: 2,
          productNo: '10011',
          productName: '测试产品1',
          productDesc: '测试',
          price: 12.1,
          chType: 46,
          status: 1,
          skuAttrValueDTOS: [
            {
              attrId: 1,
              attrName: '面值',
              valueId: 1,
              valueName: '5'
            },
            {
              attrId: 2,
              attrName: '运营商',
              valueId: 3,
              valueName: '移动'
            },
            {
              attrId: 3,
              attrName: '面包',
              valueId: 3,
              valueName: '喵宝值'
            }
          ],
          cardType: null,
          skuInfo: null
        },
        {
          skuId: 3,
          productNo: '10012',
          productName: '测试产品2',
          productDesc: '测试',
          price: 12.2,
          chType: 46,
          status: 1,
          skuAttrValueDTOS: [
            {
              attrId: 1,
              attrName: '面值',
              valueId: 1,
              valueName: '5'
            },
            {
              attrId: 2,
              attrName: '运营商',
              valueId: 4,
              valueName: '电信'
            }
          ],
          cardType: null,
          skuInfo: null
        },
        {
          skuId: 4,
          productNo: '10013',
          productName: '测试产品3',
          productDesc: '测试',
          price: 12.3,
          chType: 46,
          status: 1,
          skuAttrValueDTOS: [
            {
              attrId: 1,
              attrName: '面值',
              valueId: 2,
              valueName: '10'
            },
            {
              attrId: 2,
              attrName: '运营商',
              valueId: 3,
              valueName: '移动'
            }
          ],
          cardType: null,
          skuInfo: null
        },
        {
          skuId: 5,
          productNo: '10014',
          productName: '测试产品4',
          productDesc: '测试',
          price: 12.4,
          chType: 46,
          status: 1,
          skuAttrValueDTOS: [
            {
              attrId: 1,
              attrName: '面值',
              valueId: 2,
              valueName: '10'
            },
            {
              attrId: 2,
              attrName: '运营商',
              valueId: 4,
              valueName: '电信'
            }
          ],
          cardType: null,
          skuInfo: null
        }
      ]

默认死的表头为：

4ee03b4ea79b48d7b7639507236b29eb.png以上6个字段对应的是productNo、productName、skuInfo、productDesc、price、status

还需要在表格的前边增加skuAttrValueDTOS这个字段中的数据。

那么就要循环了：

首先在data中定义数据：
data () {
    return {
      tableData: [], // table的最终数据存放
      tableColumns: [ // 这是死的表头
        { prop: 'productNo', label: '产品编号', width: 120 },
        { prop: 'productName', label: '产品名称', width: 200 },
        { prop: 'skuInfo', label: '产品英文编号', width: 150 },
        { prop: 'productDesc', label: '产品描述', width: 150 },
        { prop: 'price', label: '指导价', width: 100 },
        { prop: 'status', label: '是否启用', width: 100 }
      ],
      skuInfoDTOS: [ // 这是后端返回的数据
        {
          skuId: 2,
          productNo: '10011',
          productName: '测试产品1',
          productDesc: '测试',
          price: 12.1,
          chType: 46,
          status: 1,
          skuAttrValueDTOS: [
            {
              attrId: 1,
              attrName: '面值',
              valueId: 1,
              valueName: '5'
            },
            {
              attrId: 2,
              attrName: '运营商',
              valueId: 3,
              valueName: '移动'
            },
            {
              attrId: 3,
              attrName: '面包',
              valueId: 3,
              valueName: '喵宝值'
            }
          ],
          cardType: null,
          skuInfo: null
        },
        {
          skuId: 3,
          productNo: '10012',
          productName: '测试产品2',
          productDesc: '测试',
          price: 12.2,
          chType: 46,
          status: 1,
          skuAttrValueDTOS: [
            {
              attrId: 1,
              attrName: '面值',
              valueId: 1,
              valueName: '5'
            },
            {
              attrId: 2,
              attrName: '运营商',
              valueId: 4,
              valueName: '电信'
            }
          ],
          cardType: null,
          skuInfo: null
        },
        {
          skuId: 4,
          productNo: '10013',
          productName: '测试产品3',
          productDesc: '测试',
          price: 12.3,
          chType: 46,
          status: 1,
          skuAttrValueDTOS: [
            {
              attrId: 1,
              attrName: '面值',
              valueId: 2,
              valueName: '10'
            },
            {
              attrId: 2,
              attrName: '运营商',
              valueId: 3,
              valueName: '移动'
            }
          ],
          cardType: null,
          skuInfo: null
        },
        {
          skuId: 5,
          productNo: '10014',
          productName: '测试产品4',
          productDesc: '测试',
          price: 12.4,
          chType: 46,
          status: 1,
          skuAttrValueDTOS: [
            {
              attrId: 1,
              attrName: '面值',
              valueId: 2,
              valueName: '10'
            },
            {
              attrId: 2,
              attrName: '运营商',
              valueId: 4,
              valueName: '电信'
            }
          ],
          cardType: null,
          skuInfo: null
        }
      ]
    }
  },
// 定义一个方法调用。
created () {
    this.processData()
},
methods: {
    // 定义一个方法
    processData () {
      // 定义一个空的对象
      const dynamicHeaders = {}
      // 循环后端给的数据中的skuAttrValueDTOS字段，也就是需要在表格动态增加的数据。
      this.skuInfoDTOS.forEach(item => {
        item.skuAttrValueDTOS.forEach(attr => {
          // 判断如果为false就走
          if (!dynamicHeaders[attr.attrName]) {
            // 给每一项循环出来的表头来定义
            dynamicHeaders[attr.attrName] = { prop: `attr_${attr.attrId}`, label: attr.attrName, width: 120 }
          }
        })
      })
      // 最终的表头定义。结构出来放在死的表头前边。
      this.tableColumns = [
        ...Object.values(dynamicHeaders), // 这是根据后端给的数据，处理完成后的数据并解构
        ...this.tableColumns // 这是死的表头数据  解构
      ]
      // 这里往table绑定的数据中 赋值。
      this.tableData = this.skuInfoDTOS.map(item => {
        const data = {
          productNo: item.productNo,
          productName: item.productName,
          skuInfo: item.skuInfo,
          productDesc: item.productDesc,
          price: item.price,
          status: item.status
        }
        // 循环后端给的数据中的表头对应的值，并赋值给每一项
        item.skuAttrValueDTOS.forEach(attr => {
          data[`attr_${attr.attrId}`] = attr.valueName
        })
        // 最终返回去这个 重构好新的数据。
        return data
      })
    }
  }

以上是数据处理的全部步骤

以下是全部的代码。

<template>
  <el-table :data="tableData" border>
    <el-table-column v-for="(column, index) in tableColumns" :key="index" :prop="column.prop" :label="column.label"
      header-align="center" align="center" :width="column.width"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      tableColumns: [
        { prop: 'productNo', label: '产品编号', width: 120 },
        { prop: 'productName', label: '产品名称', width: 200 },
        { prop: 'skuInfo', label: '产品英文编号', width: 150 },
        { prop: 'productDesc', label: '产品描述', width: 150 },
        { prop: 'price', label: '指导价', width: 100 },
        { prop: 'status', label: '是否启用', width: 100 }
      ],
      skuInfoDTOS: [
        {
          skuId: 2,
          productNo: '10011',
          productName: '测试产品1',
          productDesc: '测试',
          price: 12.1,
          chType: 46,
          status: 1,
          skuAttrValueDTOS: [
            {
              attrId: 1,
              attrName: '面值',
              valueId: 1,
              valueName: '5'
            },
            {
              attrId: 2,
              attrName: '运营商',
              valueId: 3,
              valueName: '移动'
            },
            {
              attrId: 3,
              attrName: '面包',
              valueId: 3,
              valueName: '喵宝值'
            }
          ],
          cardType: null,
          skuInfo: null
        },
        {
          skuId: 3,
          productNo: '10012',
          productName: '测试产品2',
          productDesc: '测试',
          price: 12.2,
          chType: 46,
          status: 1,
          skuAttrValueDTOS: [
            {
              attrId: 1,
              attrName: '面值',
              valueId: 1,
              valueName: '5'
            },
            {
              attrId: 2,
              attrName: '运营商',
              valueId: 4,
              valueName: '电信'
            }
          ],
          cardType: null,
          skuInfo: null
        },
        {
          skuId: 4,
          productNo: '10013',
          productName: '测试产品3',
          productDesc: '测试',
          price: 12.3,
          chType: 46,
          status: 1,
          skuAttrValueDTOS: [
            {
              attrId: 1,
              attrName: '面值',
              valueId: 2,
              valueName: '10'
            },
            {
              attrId: 2,
              attrName: '运营商',
              valueId: 3,
              valueName: '移动'
            }
          ],
          cardType: null,
          skuInfo: null
        },
        {
          skuId: 5,
          productNo: '10014',
          productName: '测试产品4',
          productDesc: '测试',
          price: 12.4,
          chType: 46,
          status: 1,
          skuAttrValueDTOS: [
            {
              attrId: 1,
              attrName: '面值',
              valueId: 2,
              valueName: '10'
            },
            {
              attrId: 2,
              attrName: '运营商',
              valueId: 4,
              valueName: '电信'
            }
          ],
          cardType: null,
          skuInfo: null
        }
      ]
    }
  },
  created () {
    this.processData()
  },
  methods: {
    processData () {
      const dynamicHeaders = {}
      this.skuInfoDTOS.forEach(item => {
        item.skuAttrValueDTOS.forEach(attr => {
          if (!dynamicHeaders[attr.attrName]) {
            dynamicHeaders[attr.attrName] = { prop: `attr_${attr.attrId}`, label: attr.attrName, width: 120 }
          }
        })
      })
      this.tableColumns = [
        ...Object.values(dynamicHeaders),
        ...this.tableColumns
      ]

      this.tableData = this.skuInfoDTOS.map(item => {
        const data = {
          productNo: item.productNo,
          productName: item.productName,
          skuInfo: item.skuInfo,
          productDesc: item.productDesc,
          price: item.price,
          status: item.status
        }

        item.skuAttrValueDTOS.forEach(attr => {
          data[`attr_${attr.attrId}`] = attr.valueName
        })

        return data
      })
    }
  }
}
</script>

<style scoped></style>

有不懂的可以评论区留言，我会解答😀

对你有帮助的，请点个赞，谢谢大家！❤️

Geng~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue element 中的table动态渲染实现（动态表头）
10-15
主要介绍了vue element 中的table动态渲染实现（动态表头），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue el-table实现自定义表头
10-15
主要为大家详细介绍了vue el-table实现自定义表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
element ui 动态显示表格表头
最新发布
weixin_56119955的博客
07-26 413
【代码】element ui 动态显示表格表头。
el-table动态配置显示表头
sinat_34896766的博客
06-04 851
【代码】el-table动态配置显示表头。
对el-table表格的表头操作
m0_63026408的博客
02-29 1862
看，基本上一样的用法：colspan='number' 属性，设置单元格可以横跨几列（默认一个单元格横向只占据一列） 图示3： 图示4： 代码： 效果2：el-table多级表头合并 图示1： html部分需要el-table-column标签进行嵌套 js部分： 图示2： html部分 js部分： 还可以，直接通过column.label找到对应单元格，然后进行合并单元格操作，不使用rowIndex和columnIndex了 这种方式，在某些情况下，会更加方便
vue el-table实现动态表头
热门推荐
qq_45093219的博客
09-30 1万+
el-table实现动态表头
Vue el-table动态表头与数据
m0_61315972的博客
07-05 6536
在Vue中，el-table是element-ui提供的强大表格组件，可以用于展示静态和动态表格数据。动态表头是一个常见的需求，特别是在管理系统中，用户可能根据不同的业务场景需要显示不同的表头信息。本文将详细介绍如何在Vue中实现动态表头与数据展示，并使用el-table来实现这一功能。通过以上步骤，我们成功在Vue中实现了动态表头与数据展示。使用DynamicTable组件，我们可以根据业务需求轻松配置表头，实现动态展示数据。这个功能在管理后台系统中尤其实用，帮助用户根据不同的业务场景查看和分析数据。
Vue 中 Element UI 的 el-table 组件实现动态表头和内容
强者惜字如金，弱者废话连篇！
01-18 2686
Vue 中 Element UI 的 el-table 组件实现动态表头和内容。
el-table表格——动态表头 (前后端)
zhoulijia666的博客
04-15 821
背景 ： 根据主表的数据点动态展示子表数据，并且列为动态。
element动态table表头以及属性
12-19
原ui库为ivew库，需求加载动态table表头以及动态过滤不同数据，时间类为引入时间插件非单纯数据，其余为chebox类型，如不引入ivew,将里面组件替换成elment对应组件即可
vue el-table实现行内编辑功能
10-15
首先，我们需要在`el-table`的表头部分自定义一个“新增”按钮，以便用户能够动态添加新的行数据。这可以通过使用`slot="header"`来完成。在`<template>`标签中定义一个按钮，绑定点击事件`@click`，当点击时调用...
el-table 动态添加表头数据，进行动态字段添加问题的解决办法
beichen3997的博客
07-12 6212
在el-table 中动态添加表头字段时有时候会出现表头跟下面的数据对应不上的情况，这是因为在element中el-table的底层原理中， 表头时一个table，中间数据为一个table，el-table一共创建了2个table,他们呢之间时通过index进行一一对应的，要想解决需要在 el-table-column的标签添加唯一标识符key 表示一一对应 <el-table-co...
el-table实现动态表头
weixin_44090040的博客
12-29 3247
<!-- * @Descripttion: 封装动态表头 * @version: * @Author: zhangfan * @email: 2207044692@qq.com * @Date: 2020-07-03 17:35:37 * @LastEditors: zhangfan * @LastEditTime: 2020-07-15 11:32:58 --> <template> <el-table-column :prop="col.prop" :
vue怎么做动态表头
wydtyz的博客
05-28 179
【代码】vue怎么做动态表头。
element el-table写多级表头
qq_45915072的博客
04-16 453
【代码】element el-table写多级表头。
vue3+element 动态表头
weixin_56881180的博客
04-11 656
tableHeader数组和 tableDate数组
在vue中el-table调整表头颜色
03-05
可以通过设置 el-table 的 header-cell-style 属性来调整表头的颜色，例如： ``` <el-table :data="tableData" :header-cell-style="{background: '#f5f5f5'}"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 其中，header-cell-style 属性的值是一个对象，可以设置表头单元格的样式，例如设置背景色为 #f5f5f5。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值