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" }
            ]
          }
        ]
      }
    ]
  }
];
相关推荐
mCell2 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip2 小时前
Node.js 子进程:child_process
前端·javascript
excel5 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel6 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼7 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping7 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙8 小时前
[译] Composition in CSS
前端·css
白水清风8 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript