el-table 合并表头并且修改表头样式

最新推荐文章于 2024-08-07 19:25:26 发布

qq_45587419

最新推荐文章于 2024-08-07 19:25:26 发布

阅读量392

点赞数 5

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_45587419/article/details/125330558

版权

用官方的header-cell-style属性，就能解决问题，直接上代码

html：
<el-table
      :header-cell-style="headerStyle"
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      size="medium"
      height="70vh"
      ><el-table-column
        prop="deptName"
        label="部门名称"
        align="center"
        fixed="left"
      ></el-table-column>
      <el-table-column
        prop="typeName"
        label="部门名称"
        align="center"
        fixed="left"
      ></el-table-column>
</el-table>

methods：
headerStyle({ row, column, rowIndex, columnIndex }) {
      if (row[0].level == 1) {
        row[0].colSpan = 0;
        row[1].colSpan = 2;
        if (columnIndex === 0) {
          return { display: "none" };
        } else {
          return {
            background: "#eef1f6",
            color: "#606266",
            textAlign: "center",
          };
        }
      }
    },

最终效果图呈现：