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" }
            ]
          }
        ]
      }
    ]
  }
];
相关推荐
IT_陈寒8 小时前
Java性能调优:从GC日志分析到实战优化的5个关键技巧,让你的应用快如闪电!
前端·人工智能·后端
Mintopia8 小时前
🚀 Next.js API 压力测试:一场前端与后端的“极限拉扯”
前端·后端·全栈
Mintopia8 小时前
🛡️ 对抗性攻击与防御:WebAI模型的安全加固技术
前端·javascript·aigc
庙堂龙吟奈我何8 小时前
qiankun知识点
前端
SoaringHeart9 小时前
Flutter封装:原生路由管理极简封装 AppNavigator
前端·flutter
menu9 小时前
AI给我的建议
前端
张可爱9 小时前
20251018-JavaScript八股文整理版(上篇)
前端
小小测试开发9 小时前
Python Arrow库:告别datetime繁琐,优雅处理时间与时区
开发语言·前端·python
自律版Zz9 小时前
手写 Promise.resolve:从使用场景到实现的完整推导
前端·javascript
golang学习记9 小时前
从0死磕全栈之Next.js 自定义 Server 指南:何时使用及如何实现
前端