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" }]}]}]}
];