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" }
            ]
          }
        ]
      }
    ]
  }
];
相关推荐
excel3 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着3 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友4 小时前
什么是API签名?
前端·后端·安全
会豪7 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子7 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶7 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子7 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_7 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark7 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23337 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts