el-select多选下拉框限制最少选一个
时间: 2023-10-19 10:23:02 浏览: 469
前端 layui-fromSelects 下拉框多选,搜索
您可以使用 prop 属性中的 multiple 和 clearable 来定义可多选和可清空,同时通过自定义校验函数来限制最少选择项数量。具体实现可以参考以下代码:
```html
<el-select v-model="selected" :multiple="true" :clearable="true" :rules="[{
validator: (rule, value, callback) => {
if (value && value.length < 1) {
callback(new Error('至少选择一个选项'));
} else {
callback();
}
},
trigger: 'blur'
}]">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
```
其中,selected 和 options 分别为多选下拉框的选中项和选项列表。自定义校验函数通过 validator 属性定义,并在校验失败时调用 callback 函数返回错误信息。通过 trigger 属性指定校验触发的事件,这里我们在失去焦点时校验。
阅读全文