element ui 怎么collapse-tags怎么显示前3个 其他折叠
时间: 2024-04-29 15:26:02 浏览: 225
JS实现三级折叠菜单特效,其它级可自动收缩
对于 element ui 的 collapse-tags,您可以使用其 props 属性 max-tag-count 来设置显示的最大标签数,然后使用 CSS 样式来隐藏超出此最大数的标签。以下是一个例子:
```html
<el-select v-model="selectedTags" multiple collapse-tags :max-tag-count="3">
<el-option v-for="tag in tags" :key="tag.value" :label="tag.label" :value="tag.value"></el-option>
</el-select>
<style>
.el-select__tags-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
```
在这个例子中,我们将 el-select 的 max-tag-count 属性设置为 3,使之仅显示前三个标签。我们使用 CSS 样式设置了 .el-select__tags-text 的 overflow 属性为 hidden,让超出最大标签数的标签被隐藏,并使用 text-overflow 属性设置省略号来提示用户还有更多的标签可见,最后将 white-space 属性设置为 nowrap,使文本不会换行。
阅读全文