element ui表格头部和表单的小红星*

表格头部小红星

 在表格模板中写:render-header="renderHeader" 

 <el-table-column label="纯度" :render-header="renderHeader" >

在方法中写

        renderHeader (h, { column, $index }){
                let currentLabel = column.label;
                return h('span',{},[
                h('span',{class: 'headerIcon'},'*'),
                h('span',{},currentLabel)
                ])
            },

样式中颜色变红 

  ::v-deep .headerIcon {
    color: red;
    vertical-align: middle;
  }

--------------------------------------------------------------------------------------

还有一种方法：

在表格<el-table>标签中加:header-cell-class-name="start",相当于加一个类名,method中写方法，

 columnIndex是表格列的下标

  start({row,rowIndex,column,columnIndex}){
      if(columnIndex==7||columnIndex==10||columnIndex==9){
        return 'start'
      }
    },

在样式中写颜色

::v-deep {
    .el-table table tr th.start div:before {
                    content: '*';
                     color:red;
  }
}

表单动态小红星

<el-form-item label-width="90px" label="理由" prop="remarks" v-if="formData.exStatus !== 1">
   <span slot="label">
    <span v-if="formData.exStatus !== '1'" style="color: #ff4949">*</span>理由:</span>
        <el-input
         v-model="formData.remarks"
         type="textarea"
         placeholder="请输入理由"
         :autosize="{ minRows: 2, maxRows: 4 }"
          maxlength="200"
          show-word-limit>
        </el-input>
</el-form-item>

-------------------------------------------------------------------------------------------------------------------------

还有一种快速的方法，表单<el-form-item>标签内加 required

              <el-form-item required  label="申请准入期限" >
                <el-date-picker
                  type="daterange"
                  v-model="item.applyTimeList"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
               class="pickerStyle"
                  :picker-options="pickerOptions"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  range-separator="至"
                  clearable
                >
                </el-date-picker>
              </el-form-item>