ElementUI中el-table想实现多行表头怎么实现(el-table实现多行表头)

ElementUI表格多行表头实现问题记录

---

前言

elementUI el-table使用时想实现多行表头，并且表头也实时渲染数据实现

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、向下看

想实现的效果如下图所示，多行表头，且第二行表头中有数据展示

上代码：

<el-table
   ref="targetTable"
   :max-height="528"
   :data="tableData"
   style="width: 100%;"
 >
   <template v-for="(item, index) in tableHeader">
     <el-table-column
       v-if="index === 0"
       :key="index"
       :label="item.month"
       :fixed="true"
       width="155px"
     >
       <el-table-column
         label="新增数"
         :fixed="true"
         width="155px"
       >
         <el-table-column
           label="在用数"
           :prop="item.prop"
           :fixed="true"
           width="155px"
         >
           <el-table-column
             label="在用License-Cohort"
             :prop="item.prop"
             width="155px"
           >
           </el-table-column>
         </el-table-column>
       </el-table-column>
     </el-table-column>
     <el-table-column
       v-else
       :key="index"
       :label="item.label"
       :prop="item.prop"
       :width="item.width"
       :fixed="item.fixed"
     >
       <el-table-column
         label="xx"
         :width="item.width"
       >
         <template slot="header">
           {{ newCount[item.prop] }}
         </template>
         <el-table-column
           label="xx"
           :prop="item.prop"
           :width="item.width"
         >
           <template slot="header">
             {{ inuseCount[item.prop] }}
           </template>
           <el-table-column
             label=""
             :prop="item.prop"
           >
           </el-table-column>
         </el-table-column>
       </el-table-column>
     </el-table-column>
   </template>
 </el-table>

关键代码就是再coloum里面在装一层，你想要表头多少行就在嵌多少层

代码如下：

<el-table-column
  label="新增数"
   :fixed="true"
   width="155px"
 >
   <el-table-column
     label="在用数"
     :prop="item.prop"
     :fixed="true"
     width="155px"
   >
     <el-table-column
       label="在用License-Cohort"
       :prop="item.prop"
       width="155px"
     >
     </el-table-column>
   </el-table-column>
 </el-table-column>
</el-table-column>

该处使用的url网络请求的数据。

---

总结

提示：这里对文章进行总结：
以上就是今天想分享的el-table多行表头的使用，希望对你有所帮助。有问题可以私信啊