el-select多选tag数值
时间: 2023-07-24 18:24:59 浏览: 73
Element-ui 多选.md
您可以使用 `el-select` 的 `multiple` 属性来启用多选模式,然后使用 `v-model` 绑定一个数组来存储用户选择的值。例如:
```html
<template>
<el-select v-model="selectedValues" 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 {
options: [
{ label: '标签1', value: 'tag1' },
{ label: '标签2', value: 'tag2' },
{ label: '标签3', value: 'tag3' },
{ label: '标签4', value: 'tag4' },
],
selectedValues: [], // 存储用户选择的值
};
},
};
</script>
```
在上面的示例中,`options` 数组中定义了四个选项,每个选项都有一个 `label` 和一个 `value`。`el-select` 组件使用 `v-for` 渲染这些选项,`multiple` 属性启用了多选模式,`v-model` 绑定了一个数组 `selectedValues`,这个数组会存储用户选择的值。当用户选择一个选项时,它的 `value` 会被添加到 `selectedValues` 数组中;当用户取消选择一个选项时,它的 `value` 会从 `selectedValues` 数组中删除。因此,`selectedValues` 数组中存储的就是当前用户选择的所有值。
阅读全文