本文主要是介绍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%;
}
这篇关于vue3 element-plus 表格中必填项展示的星号的前后位置设置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
