通过 el-select 实现自定义省略折叠数量
刀刀
0字
0分钟
2026/8/16
现在有一个场景：项目使用了 Element UI 中的 el-select 组件多选，但不需要它换行显示，会拉大整体输入框的高度。查看文档发现有一个折叠的字段。
虽然能实现折叠，但它只要超出一条就折叠了，后面空余的输入框无内容填充，显然不太合适，因此需要主动修改。
但修改不能修改源码，使用第三方组件时尽可能避开源码的修改，避免引起不必要的错误。如何修改呢？可用以下两种方法：
- 纯 CSS 样式修改
- 使用原生 JavaScript 操作 DOM
CSS 修改
先看看 CSS 修改的方法，可采取让他显示一定数量，比如两个，后续的隐藏。找到对应类名设置样式：
vue
<style>
.el-tag.el-tag--info:nth-child(n + 3) {
display: none;
}
</style>虽然效果实现了，但还是很不合理，这样如果不点开看还以为只选择了两个选项，没有相应提示。因此纯 CSS 修改法不合适。
使用 JavaScript 操作 DOM
思路如下：
- 创建一个
span标签，通过定位样式把标签放在el-select后面 - 获取
el-select选中的数量，大于 2 时显示对应数量，小于等于 2 时隐藏
代码如下：
vue
<template>
<div id="app">
<el-select multiple v-model="value" placeholder="请选择" @change="changeFn">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template>
<script>
// 创建 span 节点，在此创建整个 script 都可使用
const span = document.createElement('span')
span.className = 'num_select'
export default {
name: 'App',
data() {
return {
options: [
// ...
],
value: '',
}
},
mounted() {
const select = document.querySelector('.el-select')
select.appendChild(span)
},
methods: {
changeFn(val) {
// 触发事件函数后判断长度
if (val.length > 2) {
span.setAttribute('style', 'display:inline-block')
span.innerHTML = `+${val.length - 2}`
} else {
span.setAttribute('style', 'display:none')
}
},
},
}
</script>
<style>
/* 超出2的选项隐藏，设置span标签的样式力求一致 */
.el-tag.el-tag--info:nth-child(n + 3) {
display: none;
}
.num_select {
display: none;
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
padding: 3px 5px;
background-color: #f4f4f5;
border: 1px solid #e9e9eb;
color: #909399;
font-size: 12px;
border-radius: 5px;
}
</style>总结
遇到此类需求，可先用 CSS 隐藏一些不需要显示的东西，达到"伪装"的实现效果；如果还是达不到效果，就通过 JavaScript 直接操作 DOM 来实现需求。
贡献者
duyidao 刀刀
v_duyilin
平安喜乐