使用elementplus 组件的下拉框,采用 多选的代码,编写一个例子
时间: 2023-06-12 11:03:29 浏览: 328
好的,以下是一个使用 Element Plus 多选下拉框组件的例子:
```html
<template>
<div>
<el-select v-model="selectedOptions" multiple placeholder="请选择">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" />
</el-select>
<div>已选项:{{ selectedOptions }}</div>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
{ label: '选项4', value: 'option4' },
],
selectedOptions: [],
};
},
};
</script>
```
在这个例子中,我们定义了一个 `el-select` 组件,设置了 `multiple` 属性以启用多选,然后通过 `v-for` 指令动态生成了多个 `el-option` 组件作为下拉选项。当用户选择下拉选项时,`v-model` 绑定的 `selectedOptions` 数组会自动更新。最后,我们使用插值语法将当前已选项展示在页面上。
希望这个例子对你有所帮助!