elementui的el-form-item的两种必填样式

2020-12-15  本文已影响0人  小呆糊总
1.用el-form-itrm自带的is-required的样式,如果是必填,增加is-required样式
<el-col :span="(items.type==4 || items.type==7) ? 24 : 12" 
  v-for="(items,indexs) in itemList"  :key="indexs">
  <el-form-item :label="items.name+':'" :class="items.need== 1 ?'is-required':''" >
  </el-form-item>
</el-col>
2.用slot重写label
<el-col :span="(items.type==4 || items.type==7) ? 24 : 12" 
  v-for="(items,indexs) in itemList"  :key="indexs">
  <el-form-item>
                <label slot="label">
                  <span v-if="items.need == 1" style="color: #F56C6C;">*</span>
                  {{items.name}}:
                </label>
  </el-form-item>
</el-col>
注:is-required使用的是before注入的样式
 .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
}
上一篇 下一篇

猜你喜欢

热点阅读