el-table 动态多级表头的背景颜色

使用el-table的header-cell-style和header-cell-class-name实现动态表头样式

原创已于 2022-03-24 15:50:26 修改 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-03-24 15:46:35 首次发布

本文介绍了在Vue中使用Element UI的el-table组件，通过header-cell-style和header-cell-class-name属性来动态设置表格表头的样式和类名。在实际应用中，这两个属性能帮助开发者自定义复杂表格布局。然而，需要注意的是，如果尝试通过元素的class来设置样式并切换表格，可能会发现class会变化，不建议依赖column的id，因为id可能会变动。正确做法是理解其动态性，并适当地绑定和处理样式及类名。

el-table属性 header-cell-style和header-cell-class-name，添加表头样式和类名解决

<el-table :data="data" :header-cell-style="tableHeaderCellStyle" :header-cell-class-name="headerRowStyle">

<template v-for="(item,index) in tableHead">
        <template v-if="item.checked">
<el-table-column :prop="item.prop" :label="tem.label" :key="index">

        <template v-for="(child,ii) in item.children">
                <template v-if="child.checked">
          <el-table-column :prop="child.prop" :label="child.label" :key="ii">
        </el-table-column>
                </template>
               </template>

</el-table-column>
        </template>
       </template>
</el-table>