（vue）el-tabs标签页展示el-table动态表头表格

nyf_unknown

于 2024-10-12 10:56:39 发布

阅读量118

点赞数

分类专栏： VUE 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_44754635/article/details/142872359

版权

VUE 专栏收录该内容

190 篇文章 2 订阅

订阅专栏

（vue）el-tabs标签页展示el-table动态表头表格

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

代码

<el-tabs v-if="showStatistics" type="border-card">
 <el-tab-pane
   v-for="(item, index) in statisticsTable"
   :key="index"
   :label="item.processName"
 >
   <el-table
     :data="item.tableObj"
     border
     size="mini"
     style="width: 100%"
     max-height="550"
     :header-cell-style="{
       'text-align': 'center',
       'background-color': 'var(--button-color)',
       color: 'white',
     }"
     :cell-style="{ 'text-align': 'center' }"
   >
     <!-- <el-table-column v-for="(ele, i) in item.headList" :key="i" :prop="ele.value" :label="ele.label" align="center" /> -->
     //新
     <el-table-column
       v-for="(ele, i) in item.headList"
       :key="i"
       :prop="ele"
       :label="ele"
       width="230"
       align="center"
     />
   </el-table>
 </el-tab-pane>
</el-tabs>