el-form-item 设置不允许为空
时间: 2023-12-14 18:31:31 浏览: 83
el-form-item可以通过设置prop属性来实现不允许为空的效果,具体实现方法如下所示:
```html
<el-form-item label="标签名称" prop="tagName" :rules="[ { required: true, message: '标签名称不能为空', trigger: 'blur' } ]">
<el-input v-model="form.tagName" placeholder="请输入标签名称"/>
</el-form-item>
```
其中,prop属性用于指定表单项对应的数据模型字段,rules属性用于指定表单项的校验规则,required为必填项,message为校验不通过时的提示信息,trigger为触发校验的事件,这里设置为blur即失去焦点时触发校验。
相关问题
el-form-item的label值为什么自动换行
el-form-item 的 label 值自动换行可能是因为其所在的容器宽度不足以容纳 label 的全部文字,导致 label 换行显示。你可以尝试调整 el-form-item 所在容器的宽度,或者使用 CSS 样式控制 label 文字的长度或换行方式。例如,可以使用 white-space 属性控制是否允许换行,或者使用 text-overflow 属性控制当文字过长时的显示方式。
el-form select多选
对于 el-form 的 select 组件来说,要实现多选功能可以使用 el-select 的 multiple 属性。设置 multiple 属性为 true,就可以允许用户选择多个选项了。
示例代码如下:
```html
<template>
<el-form>
<el-form-item label="选择项">
<el-select v-model="selectedOptions" multiple>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' },
// 其他选项...
]
};
}
};
</script>
```
在这个示例中,使用了 el-select 组件来展示多个选项,通过设置 v-model 的值为 selectedOptions,可以将用户选择的选项存储起来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)