el-table 中给表头加上必填星号（红色*）

背景

做后台管理项目的时候，有时候会遇到可编辑表格的需求。还有一种需求，是在可编辑的表格表头上，加上 ElementUI 中表示必填的红色*。

1. 在需要加必填星号的 el-table-column 上添加 render-header 属性。

   <el-table-column
          :render-header="addRedStar"
          prop="supportFund"
          label="经费额（万元）"
          align="center"
          :render-header="addStar"
        >
  </el-table-column>

2. 在 methods 中定义 addStar 函数。

    addStar(h, { column }) {
      return [
        h("span", { style: "color: red" }, "*"),
        h("span", " " + column.label),
      ];
    }

注意

此方法只是给表头加上了星号，真正的逻辑校验还是要自己写。

el-form 中给表单某一项加必填星号，只是样式展示，没有逻辑校验

::v-deep .(自定义的类名) .el-form-item__label:before {
  content: '*';
  color: #ff4949;
  margin-right: 4px;
}