el-select多选如何回显
时间: 2024-02-21 22:55:42 浏览: 153
select2控件回显方法
el-select是Element UI中的一个下拉选择组件,可以用于单选或多选。当使用el-select进行多选时,回显已选项的方式有两种:
1. 使用v-model绑定一个数组,数组中存储已选项的值。例如,将v-model绑定到一个名为selectedOptions的数组上:
```html
<el-select v-model="selectedOptions" multiple>
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
```
在data中定义selectedOptions数组,并初始化为已选项的值:
```javascript
data() {
return {
selectedOptions: ['option1', 'option2']
}
}
```
这样,已选项会在页面加载时自动回显。
2. 使用value属性绑定一个数组,数组中存储已选项的值。例如:
```html
<el-select :value="selectedOptions" multiple>
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
```
在data中定义selectedOptions数组,并初始化为已选项的值:
```javascript
data() {
return {
selectedOptions: ['option1', 'option2']
}
}
```
这样,已选项会在页面加载时自动回显。
阅读全文