vue3 element-plus el-table多层级表头动态渲染方式
更新时间：2026年06月30日 09:50:06 作者：浅浅一笑^*^
这篇文章主要介绍了vue3 element-plus el-table多层级表头动态渲染方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3 element-plus el-table多层级表头动态渲染
效果图
html
<el-table :data="arrlist" border style="width: 100%">
<template v-for="(i, index) in currentFieldData" :key="index">
<el-table-column :label="i.label" :header-D="i.headerAlign">
<el-table-column
v-for="(k, k_index) in i.rows"
:key="k_index"
:label="k.label"
:prop="k.prop"
:header-align="k.align"
>
</el-table-column>
<el-table-column
v-for="(y, y_index) in i.indexCustomIndex"
:key="y_index"
:label="y.label"
:prop="i.prop"
:header-align="y.align"
>
<el-table-column
v-for="(x, x_index) in y.indexClassifyList"
:key="x_index"
:label="x.label"
:prop="x.prop"
:header-align="x.align"
>
<template #default="scope">
<span>
{{scope.row.custonindexlist[y_index].indexClassifyList[x_index].indexClassify}}
</span>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
</template>
</el-table>js
<script setup lang="ts">
import { ElTable, ElTableColumn } from "element-plus";
// 字典:表头与list数组比对后，返回新的组装后的数组，再显示
//表头数据要动态渲染
//data 后台返回数据结构，如果不是自己想要的，就手动修改为自己需要的结构，在渲染列表
const currentFieldData = [
{
label: "产品",
prop: "产品",
headerAlign: "center",
rows: [
{
label: "111",
prop: "danwei1",
align: "center"
},
{
label: "222",
prop: "danwei2",
align: "center"
}
],
indexCustomIndex: [
{
label: "成立以来",
prop: "from_fund_begin",
align: "center",
indexClassifyList: [
{
label: "1-1",
prop: "index_classify_1",
align: "center"
},
{
label: "1-2",
prop: "index_classify_2",
align: "center"
},
{
label: "1-3",
prop: "index_classify_3",
align: "center"
}
]
},
{
label: "今年以来",
prop: "from_this_year",
align: "center",
indexClassifyList: [
{
label: "2-1",
prop: "index_classify_4",
align: "center"
},
{
label: "2-2",
prop: "index_classify_5",
align: "center"
},
{
label: "2-3",
prop: "index_classify_6",
align: "center"
}
]
}
]
},
{
label: "产品300",
prop: "产品300",
headerAlign: "center",
rows: [
{
label: "指数",
prop: "zhishu",
align: "center"
}
],
indexCustomIndex: [
{
label: "成立以来",
prop: "from_fund_begin",
align: "center",
indexClassifyList: [
{
label: "2-1-1",
prop: "index_classify_7",
align: "center"
},
{
label: "2-1-2",
prop: "index_classify_8",
align: "center"
},
{
label: "2-1-3",
prop: "index_classify_9",
align: "center"
}
]
},
{
label: "今年以来",
prop: "from_this_year",
align: "center",
indexClassifyList: [
{
label: "2-2-1",
prop: "index_classify_10",
align: "center"
},
{
label: "2-2-2",
prop: "index_classify_11",
align: "center"
},
{
label: "2-2-3",
prop: "index_classify_12",
align: "center"
}
]
}
]
}
];
const arrlist = [
{
danweijingzhi:'1.02',
leijijingzhi:'2.0782',
zhishu:'3.01',
baseIndexList: [
{
baseIndexUpDownPercent: -0.1951,
closePrice: 3341.953,
indexCustomIndex: [
{
dateRange: "from_fund_begin",
indexClassifyList: [
{
indexClassify: "index_classify_profit",
indexDetailist: [
{ indexType: "total_profit", indexValue: "3.0215" }
]
},
{
indexClassify: "index_classify_risk",
indexDetailist: [
{ indexType: "total_profit", indexValue: "3.0215" }
]
},
{
indexClassify: "index_classify_total",
indexDetailist: [
{ indexType: "total_profit", indexValue: "3.0215" }
]
}
]
},
{
dateRange: "from_this_year",
indexClassifyList: [
{
indexClassify: "index_classify_profit",
indexDetailist: [
{ indexType: "total_profit", indexValue: "3.0215" }
]
},
{
indexClassify: "index_classify_risk",
indexDetailist: [
{ indexType: "total_profit", indexValue: "3.0215" }
]
},
{
indexClassify: "index_classify_total",
indexDetailist: [
{ indexType: "total_profit", indexValue: "3.0215" }
]
}
]
}
],
indexName: "000300"
}
],
// 产品下的二层数据
custonindexlist: [
{
dateRange: "from_fund_begin",
indexClassifyList: [
{
indexClassify: "index_classify_profit",
indexDetailist: [
{ indexType: "total_profit", indexValue: "3.0215" }
]
},
{
indexClassify: "index_classify_risk",
indexDetailist: [
{ indexType: "total_profit", indexValue: "3.0215" }
]
},
{
indexClassify: "index_classify_total",
indexDetailist: [
{ indexType: "total_profit", indexValue: "3.0215" }
]
}
]
},
{
dateRange: "from_this_year",
indexClassifyList: [
{
indexClassify: "index_classify_profit",
indexDetailist: [
{ indexType: "total_profit", indexValue: "3.0215" }
]
},
{
indexClassify: "index_classify_risk",
indexDetailist: [
{ indexType: "total_profit", indexValue: "3.0215" }
]
},
{
indexClassify: "index_classify_total",
indexDetailist: [
{ indexType: "total_profit", indexValue: "3.0215" }
]
}
]
}
]
}
];
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中的directive指令快速使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
VUE中路由变化this.$router(push\replace\go\back)解读
这篇文章主要介绍了VUE中路由变化this.$router(push\replace\go\back),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在前端开发中,尤其是利用Vue3构建现代Web应用时,掌握如何使用本地存储（localStorage）来保存数据是非常重要的能力,在这篇博客中,我将详细介绍如何在Vue3中使用localStorage保存数据,并提供示例代码来帮助理解,需要的朋友可以参考下2024-06-06
基于Vue中this.$options.data()的this指向问题
这篇文章主要介绍了基于Vue中this.$options.data()的this指向问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
sass是css的预处理器,扩展了css语言,提供了规则、变量、混入、选择器、继承、内置函数等特性,有助于减少CSS重复的代码,节省开发时间,下面这篇文章主要给大家介绍了关于vue3安装配置sass的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了vue实现计数器简单制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
vue报错Cannot read properties of undefined (...)类型的解决办法
这篇文章主要给大家介绍了关于vue报错Cannot read properties of undefined (...)类型的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-04-04
这篇文章主要为大家详细介绍了vue实现axios图片上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
这篇文章主要介绍了vue打包的时候自动将px转成rem的操作方法,需要的朋友可以参考下2018-06-06
最新评论