vue + element-ui实现动态多级表头

效果图

话不多说，直接撸代码

 1           <el-table
 2             ref="multipleTable"
 3             :data="tableData"
 4             tooltip-effect="dark"
 5             style="width: 100%"
 6             :height="kc_table_height"
 7             class="eltable"
 8             border
 9             v-loading="loading"
10             @selection-change="handleSelectionChange"
11           >
12             <div slot="empty" class="kc_table_empty">暂无数据</div>
13             <el-table-column type="selection" align="center" fixed width="55"> </el-table-column>
14             <el-table-column type="index" align="center" label="序号" fixed width="55">
15             </el-table-column>
16             <template v-for="item in budgetReportList">
17               <el-table-column
18                 v-if="item.children"
19                 align="center"
20                 :prop="item.value"
21                 :min-width="item.width"
22                 :label="item.label"
23                 show-overflow-tooltip
24               >
25                 <el-table-column
26                   align="center"
27                   v-for="col in item.children"
28                   :key="col.value"
29                   :prop="col.value"
30                   :min-width="col.width"
31                   :label="col.label"
32                   show-overflow-tooltip
33                 >
34                   <template slot-scope="scope">
35                     <span>{{ scope.row[col.value] }}</span>
36                   </template>
37                 </el-table-column>
38               </el-table-column>
39               <el-table-column
40                 v-else
41                 fixed
42                 align="center"
43                 :prop="item.value"
44                 :min-width="item.width"
45                 :label="item.label"
46                 show-overflow-tooltip
47               >
48                 <template slot-scope="scope">
49                   <span>{{ scope.row[item.value] }}</span>
50                 </template>
51               </el-table-column>
52             </template>
53           </el-table>

实现思路：

首先表头，包含着两种，一级和二级表头。

for循环遍历tabHeader，如果list为空则是一级表头，只需要显示value即可。

如果list有数据，则需要再次遍历list。

接着是内容的数据，是按照每行的每一个格子都放到一个数组里面，每一行的数据又放到一个数组里。最终显示的时候只需要对应每个格子的rowIndex和columnIndex来设置tableData中的数据就OK。

发现二级表头的数据对应不上，需要给tabHeader做下处理，将tabHeader的表头数据从左到右依次排序，拿到数据源后，遍历，给value同级增加一个index字段，如果list不为空则index依次增加，最终根据这个index取tableData的值。

posted @ 2021-07-20 19:43  王小道  阅读(2446)  评论(0)  编辑  收藏  举报