情况一:必填项的星号在前面

情况图片展示:

实现方法:

        直接使用表单规则校验来实现,注意:规则校验一定要绑定prop

代码展示:

html:

<el-form label-width="94px" label-position="left" ref="formRef" :rules="formRules"  v-model="formOrder">

        <el-form-item label="客户类型" prop="userType">

               <el-radio-group v-model="formOrder.userType">

                        <el-radio label="0">个人</el-radio>

                        <el-radio label="1">公司</el-radio>

              </el-radio-group>

        </el-form-item>

</el-form>

script:   

主要代码:required: true

const formRules = {

    userType: [{ required: true,message: '请选择客户类型', trigger: 'blur' }]

}

情况二:必填项的星号在后面

情况图片展示

:hide-required-asterisk="true"    用来隐藏表单必填项星号展示

html:

<el-form label-width="94px"  :hide-required-asterisk="true"   label-position="left" ref="formRef" :rules="formRules"  v-model="formOrder">

        <el-form-item prop="userType">

                <template #label>

                      <div class="requireStar">客户类型</div>

                </template>

                <el-radio-group v-model="formOrder.userType">

                          <el-radio label="0">个人</el-radio>

                          <el-radio label="1">公司</el-radio>

                 </el-radio-group>

          </el-form-item>

</el-form>

script:   

const formRules = {

    userType: [{ required: true,message: '请选择客户类型', trigger: 'blur' }]

}

使用after来添加需要星号

css:

.requireStar:after {

    vertical-align: middle;   //加上星号会上下居中,不加会在上角展示

    content: ' *';

    color: rgba(255, 59, 48, 1);

    font-size: 100%;

}

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐