表格头部小红星
在表格模板中写: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>