美文网首页
elementui的el-form-item的两种必填样式

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

作者: 小呆糊总 | 来源:发表于2020-12-15 15:58 被阅读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;
}

相关文章

网友评论

      本文标题:elementui的el-form-item的两种必填样式

      本文链接:https://www.haomeiwen.com/subject/cnjwgktx.html