vue3 element

vue3 element

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

情况图片展示：

实现方法：

        直接使用表单规则校验来实现，注意：规则校验一定要绑定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%;

}