Vue3+ElementUI el-select 下拉框多选,下拉框里回显多选的数据
时间: 2023-08-11 21:06:58 浏览: 295
el-select 下拉框多选实现全选的实现
5星 · 资源好评率100%
在Vue3+ElementUI中,可以通过v-model指令来实现el-select下拉框的多选,同时可以通过设置el-option的selected属性来实现在下拉框中回显多选的数据。
首先,在数据模型中定义一个数组属性来存储多选的值,例如:
```javascript
data() {
return {
selectedValues: []
}
}
```
然后,在el-select中设置v-model为这个数组属性,并将multiple属性设置为true,例如:
```html
<el-select v-model="selectedValues" multiple>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
```
这样,在多选下拉框中选择的值就会被存储在selectedValues数组中,同时el-option的selected属性会被自动设置为true或false,以反映当前选项是否被选中。
如果需要在下拉框中回显已经选中的数据,可以使用v-for指令循环遍历selectedValues数组,然后在el-select中设置v-slot的方式来自定义选项的内容。例如:
```html
<el-select v-model="selectedValues" multiple>
<template v-for="value in selectedValues">
<el-option :key="value" :label="value" :value="value" :selected="true">
<span>{{ value }}</span>
</el-option>
</template>
</el-select>
```
这样,selectedValues数组中已经选中的值就会以自定义的方式显示在下拉框中。需要注意的是,为了避免重复,需要为v-for循环的每个元素设置一个唯一的key属性。
阅读全文