elementui select 复选
时间: 2023-09-02 11:14:18 浏览: 85
ElementUI 的 Select 组件支持单选和多选。如果想要使用多选功能,需要将 `multiple` 属性设置为 `true`。同时,可以设置 `filterable` 属性为 `true`,使得用户可以搜索选项。
以下是一个简单的示例:
```html
<template>
<el-select v-model="selectedOptions" multiple filterable>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2' },
{ label: '选项三', value: 'option3' },
{ label: '选项四', value: 'option4' },
{ label: '选项五', value: 'option5' }
]
}
}
}
</script>
```
在上面的示例中,我们使用 `v-model` 绑定了一个数组 `selectedOptions`,用来存储用户选择的选项。同时,我们设置了 `multiple` 和 `filterable` 属性,使得该 Select 组件变成了一个支持多选和搜索的下拉框。在 `el-option` 中,我们使用 `v-for` 渲染了所有的选项,并且设置了对应的 `label` 和 `value` 属性,用来显示选项的文本和值。
阅读全文