elementui下拉框做成可以多选天得形式
时间: 2023-07-29 16:08:23 浏览: 94
CheckBoxList_WinForm多选下拉框_下拉多选_
5星 · 资源好评率100%
您可以使用 Element UI 的下拉框组件 el-select,结合其 multiple 属性来实现多选功能。下面是一个示例代码:
```vue
<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 {
selectedOptions: [], // 用于存储选中的选项值
options: [ // 下拉框的选项列表
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' },
],
};
},
};
</script>
```
在上面的示例代码中,将 el-select 的 multiple 属性设置为 true,即可实现多选的效果。通过 v-model 指令绑定 selectedOptions 数组来存储选中的选项值。在 options 数组中定义下拉框的选项列表。
希望以上信息能对您有帮助!如果还有其他问题,请随时提问。
阅读全文