Vue — el-table部分表头加红* 提示必填

效果图：

PS：只是样式上加红*提示必填 

第一种方法：

【控制台会提示警告：Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.】

我的表头是循环出来的  在el-table-column上添加render-header属性

               <el-table-column
                    :render-header="addRedStar"
                    v-for="item in tableHeaders"
                    :label="item.label"
                    :key="item.label"
                >

methods中去写方法

      // 表头必填项标识
      addRedStar(h, { column }) {
        if(column.label === "岗位" || column.label === "考核成绩"){
          // 不需要加红*的表头
          return [
            h('span', ' ' + column.label)
          ];
        } else {
          // 需要加红*的表头
          return [
            h('span', { style: 'color: #F56C6C' }, '*'),
            h('span', ' ' + column.label) 
          ];
        }
      },

第二种方法：

听劝决定使用 scoped-slot header 

 <el-table-column
    v-for="item in tableHeaders"
    :label="item.label"
    :key="item.label"
    scoped-slot
 >
   <template slot="header">
     <div>
       <span class="red_star" v-if="item.label !== '岗位' && item.label !== '考核成绩'">*                        
       </span>
       {{item.label}}
      </div>
   </template>
   <template slot-scope="scope"> ....后续的代码

css 样式：

.red_star {
  color: #ff3b30;
  vertical-align: middle; 
}

控制台没警告了也很简单