elementui多选
时间: 2023-07-19 20:30:52 浏览: 47
要在 ElementUI 中实现多选功能,可以使用 `el-select` 组件并将其设置为多选模式。需要在 `el-select` 组件中添加 `multiple` 属性,然后将选项列表作为 `el-option` 组件的子元素即可。
以下是一个示例代码:
```html
<template>
<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>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
],
};
},
};
</script>
```
在上面的示例中,`el-select` 组件设置了 `multiple` 属性,表示该组件可以进行多选。`el-option` 组件则显示选项列表,其中 `v-for` 循环遍历 `options` 数组,将每个选项作为 `el-option` 的子元素。`v-model` 则绑定了选中的选项列表,即 `selectedOptions` 数组。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)