el-select多选不换行显示数量
时间: 2024-11-21 17:22:46 浏览: 12
el-select 下拉框多选实现全选的实现
5星 · 资源好评率100%
`el-select`是Element UI库中的下拉选择组件,如果需要在多选模式下显示已选选项的数量而不是换行,你可以通过设置`multiple`属性开启多选,并使用自定义模板来自定义内容。在`<el-option>`标签内添加一个计算属性来显示选中项的数量,例如:
```html
<template>
<el-select v-model="selectedOptions" multiple placeholder="请选择">
<el-option
v-for="option in options"
:key="option.value"
:label="option.label"
:value="option.value"
:disabled="option.disabled">
{{ option.label }} (已选{{ option.selected ? selectedOptions.filter(o => o.value === option.value).length }})
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: ...,
selectedOptions: [],
};
},
};
</script>
```
在这个例子中,`{{ option.selected ? selectedOptions.filter(o => o.value === option.value).length }}`这部分会计算当前选项是否被选中以及在`selectedOptions`中对应的项数。
阅读全文