您的位置:首页 > 财经 > 金融 > vue3 element-plus el-table 多层级表头动态渲染。

vue3 element-plus el-table 多层级表头动态渲染。

2024/12/27 9:13:18 来源:https://blog.csdn.net/weixin_46409887/article/details/141529416  浏览:    关键词: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-columnv-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-columnv-for="(y, y_index) in i.indexCustomIndex":key="y_index":label="y.label":prop="i.prop":header-align="y.align"><el-table-columnv-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" }]}]}]}
];

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com