vue3 element-plus 表格中必填项展示的星号的前后位置设置
vue3 element-plus 表格中必填项展示的星号的前后位置设置
情况一:必填项的星号在前面
情况图片展示:
实现方法:
直接使用表单规则校验来实现,注意:规则校验一定要绑定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%;
}
更多推荐
所有评论(0)