vue3 element-plus el-table 多层级表头动态渲染。

浅浅一笑^*^

已于 2024-08-25 15:18:31 修改

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2024-08-25 15:15:24 首次发布

本文链接：https://blog.csdn.net/weixin_46409887/article/details/141529416

效果图:
在这里插入图片描述

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>

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