详细写出代码Vue3+Element Plus下拉菜单多选后,下拉菜单里能够回显选择的数据
时间: 2024-03-21 13:39:39 浏览: 124
下拉列表多选
好的,下面是一个简单的示例代码,使用Vue3和Element Plus实现下拉菜单多选和回显选择的数据:
template:
```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>
```
script:
```javascript
import { ref } from 'vue';
import { ElSelect, ElOption } from 'element-plus';
export default {
components: {
ElSelect,
ElOption,
},
setup() {
const options = [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
];
const selectedOptions = ref([]);
return {
options,
selectedOptions,
};
},
watch: {
selectedOptions: {
handler: function (val) {
console.log(val);
},
deep: true,
},
},
};
```
在上面的代码中,我们使用了Vue3中的`ref`来创建了一个响应式的变量`selectedOptions`,用它来保存用户选择的选项。然后我们在模板中使用了Element Plus的`el-select`和`el-option`组件来创建下拉菜单,设置了`multiple`属性以支持多选。在`watch`中监听`selectedOptions`的变化,并在控制台中打印出选择的选项。
这样,当用户在下拉菜单中选择了选项后,我们就可以在`selectedOptions`中获取到选择的值,并且可以在控制台中看到它们的变化。如果需要将选择的值回显到下拉菜单中,可以使用`v-model`将`selectedOptions`绑定到`el-select`组件上,这样选择的值就会被自动回显到下拉菜单中。
阅读全文