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" }
            ]
          }
        ]
      }
    ]
  }
];
相关推荐
10年前端老司机2 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程6 小时前
2025前端面试题
前端·面试
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo8 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7899 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼10 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原10 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf10 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js