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

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=&#Status !== 1"><span slot="label"><span v-if=&#Status !== '1'" style="color: #ff4949">*</span>理由:</span><el-inputv-model=&#arks"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-pickertype="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>