vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头

本文介绍了在Vue和Element-UI框架中如何应对多层级、复杂维度的表头生成问题。表头包含三层结构:大类、具体项和标准值/对比值,首列和末尾列固定。解决方案利用`v-for`指令动态渲染`el-table-column`,通过数据驱动实现表头的自动生成。示例代码展示了如何绑定数据并展示在表格中。
摘要由CSDN通过智能技术生成

表头主要复杂在:
1,有三层,一层是大类,第二层是具体项,第三层是标准值/对比值
2,首列和末尾列是一层
3,整个表格的维度是根据数据的输入自己生成,也就是动态的

下面是在 vue + eleUI 中的解决方案:

<el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading" element-loading-text="拼命加载中">
    <el-table-column fixed label="IP" prop="ip" width="180"></el-table-column>
    <el-table-column v-for="(item, index) in itemList" :key="index" :label="item.label">
        <el-table-column :label="standard_name" v-for="(standard,standard_name) in item.standard"

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值