element- UI中的select多选组件如何实现超出选择框内容时换行
时间: 2024-09-14 17:04:14 浏览: 61
Element-UI中的select多选组件是基于Vue.js开发的组件库中的一个组件,它用于实现下拉选择框的功能,并支持多选。要实现在内容超出选择框时自动换行,可以通过设置组件的`collapse-tags`属性来达到这个效果。`collapse-tags`属性可以使标签在水平方向上超出后自动换行显示。
在使用时,你需要确保你使用的Element-UI版本支持这个属性。以下是一个简单的示例代码:
```html
<template>
<el-select
v-model="value"
multiple
collapse-tags>
<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 {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: []
};
}
};
</script>
```
在这个例子中,`el-select`组件被设置为多选模式(通过`multiple`属性),并且使用了`collapse-tags`属性来实现当标签过多时的自动换行。
阅读全文
相关推荐


















