使用element ui select下拉框多选,编辑状态下回显数据
时间: 2023-08-28 08:23:33 浏览: 125
select 下拉框可以多选
如果您使用 Element UI 的 Select 组件进行多选,可以通过 v-model 绑定一个数组来实现多选。如果您需要在编辑状态下回显数据,可以将数据绑定到这个数组中,然后在 Select 组件的 value 属性中引用这个数组即可。以下是一个示例代码:
```html
<template>
<div>
<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>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
],
selectedOptions: [], // 绑定多选数据
}
},
mounted() {
// 模拟编辑状态回显数据
this.selectedOptions = ['option1', 'option3']
},
}
</script>
```
在上面的代码中,我们使用了 `v-model="selectedOptions"` 将多选数据绑定到 `selectedOptions` 数组中,在 `mounted` 钩子函数中,模拟了编辑状态下回显数据的情况。在 Select 组件的 value 属性中,我们引用了 `selectedOptions` 数组,这样就可以在编辑状态下回显选中的选项了。
阅读全文