vue：el-form-item lable设置无校验的必填标识

最新推荐文章于 2025-03-10 16:56:01 发布

原创最新推荐文章于 2025-03-10 16:56:01 发布 · 3.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

收录于

本文介绍在Vue中使用Element UI组件库时如何设置表单的必填项标识。通过两种方法实现：一是直接使用`:required='true'`属性；二是通过自定义`label-slot`来添加红色星号标识。

List item

vue笔记

el-form-item lable设置无校验的必填标识
1.使用:required=“true” 属性

<el-col :span="8">
	<el-form-item label="手机号码" prop="phone" :required="true">
   		<el-input v-model="user.phone" style="width:300px"/>
    </el-form-item>
</el-col>

2.使用 label slot 自定义

<el-col :span="8">
	<el-form-item label="手机号码" prop="phone">
	// 这里放入 label slot 进行自定义
	<label slot="label"><span style="color:red">*</span>&nbsp;&nbsp;手机号码</label>
   		<el-input v-model="user.phone" style="width:300px"/>
    </el-form-item>
</el-col>