ant-design-vue下拉框多选
时间: 2023-08-14 07:03:31 浏览: 86
ant-design-vue下拉框支持多选,只需要在Select组件中设置mode属性为'multiple'即可。同时,需要在Option组件中设置value属性,以便在多选时能够正确地获取选中的值。例如:
```
<template>
<a-select mode="multiple" v-model="selectedValues">
<a-select-option v-for="option in options" :key="option.value" :value="option.value">
{{ option.label }}
</a-select-option>
</a-select>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
],
selectedValues: [],
};
},
};
</script>
```
在上面的例子中,我们定义了一个Select组件,设置了mode属性为'multiple',并使用v-model指令绑定了一个数组selectedValues,用于存储选中的值。在Option组件中,我们设置了value属性为每个选项的value值,以便在多选时能够正确地获取选中的值。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)