el-select 多选回显
时间: 2023-09-05 15:13:15 浏览: 176
el-select组件的多选回显可以使用v-model绑定一个数组来实现。
在原有的el-select组件上添加multiple属性即可开启多选功能,同时需要将v-model绑定到一个数组上来保存选中的值。例如:
```
<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>
```
其中,options为一个数组,包含了所有可选项的label和value。selectedOptions是一个用于保存选中值的数组。
当用户选择完毕后,selectedOptions数组中将保存所有选中项的value值。
如果需要在下拉框中回显已选择的选项,可以使用v-for指令遍历options数组,并使用:selected属性将已选择的项标记为选中状态。例如:
```
<el-select v-model="selectedOptions" multiple>
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" :selected="selectedOptions.indexOf(option.value) !== -1"></el-option>
</el-select>
```
这样就可以将已选择的选项在下拉框中回显出来了。
阅读全文