ElementUI：那些官方文档里没有介绍的玩法，当然了，还有坑
内容提要
文章介绍 ElementUI 中未公开的 el-scrollbar 滚动条组件，它兼具原生滚动的流畅性与跨浏览器样式一致性，使用时需设置 height 属性，原理是隐藏原生滚动条并模拟虚拟滚动条。文章还分享多选表格行移除功能，通过 row-class-name、selectable 及 deleted 字段实现行变灰禁用。但该组件不支持 max-height，未集成到表格等组件，稳定性欠佳；el-popconfirm 的按钮事件在 2.13.2 版本中无效。
延伸解读
el-scrollbar 的实用价值与实现思路
文章指出 el-scrollbar 是 ElementUI 文档中未提供 demo 的隐藏组件，其价值在于兼顾原生滚动条的流畅性与跨浏览器样式一致性。实现上通过外层容器隐藏溢出，内层滚动条宽度设为 100% 加滚动条宽度，再用外层遮挡多余部分，从而模拟出虚拟滚动条。使用时必须为 el-scrollbar 或其父级设置明确的 height，max-height 无效，否则滚动条不会出现。
多选表格行“软移除”的实现要点
针对多选表格中点击移除后行变灰、按钮变文字、复选框禁用的需求，文章给出三个关键点：用 el-table 的 row-class-name 根据行数据中的 deleted 字段返回类名以控制样式；在 selection 列上通过 selectable 函数根据 deleted 字段决定是否可选；在操作列用 v-if/v-else 切换按钮与“已移除”文字。点击移除时仅将对应行的 deleted 置为 true，而非立即删除数据。
隐藏组件的局限与使用风险
文章明确列出 el-scrollbar 的缺点：不支持 max-height，在需要限制最大高度的场景中局限性大；未集成到 ElementUI 自身组件，例如固定表头、固定列的表格仍使用浏览器原生滚动条，导致样式不统一；稳定性有待优化，项目中存在小概率滚动条不出现的情况。此外，el-popconfirm 文档中定义的两个按钮事件在 2.13.2 版本中无效，固定列且数据复杂的表格还容易因 reset CSS 写法不同出现样式错乱。
Q&A
ElementUI 的 el-scrollbar 组件怎么用？需要设置什么属性？
使用 el-scrollbar 时，需要在标签或父级元素上设置 CSS 的 height 属性，否则滚动条不会出现。示例：<el-scrollbar style="height:200px"> <div class="your-content">内容</div> </el-scrollbar>。注意 max-height 无效。
el-scrollbar 的实现原理是什么？为什么能保持原生滚动条的流畅性？
原理是隐藏原生滚动条并模拟虚拟滚动条：外层容器设置 overflow:hidden，内层滚动容器宽度设为 100% + 滚动条宽度，多出的部分被外层挡住，从而隐藏原生滚动条。滚动事件仍由原生滚动条触发，因此体验与原生一致。
ElementUI 多选表格中如何实现点击移除按钮后行变灰且复选框不可选？
在表格数据中添加 deleted 字段标记是否移除。通过 el-table 的 row-class-name 属性为已移除行添加类名（如 'deleted'）使其变灰；通过 selection 列的 selectable 属性控制复选框是否可选（返回 false 表示不可选）；点击移除按钮时将对应行的 deleted 设为 true，并切换按钮为“已移除”文字。
el-scrollbar 有哪些缺点或局限性？
主要缺点包括：不支持 max-height 属性，特定场景局限性大；未集成到 ElementUI 其他组件（如固定表头表格仍用原生滚动条）；稳定性有待优化，小概率滚动条不出现；el-popconfirm 的按钮事件在 2.13.2 版本中无效；可能因 reset CSS 导致样式错乱，尤其在固定列且数据复杂的表格中易复现。
el-popconfirm 的按钮事件在 ElementUI 2.13.2 版本中无效是怎么回事？
文章指出，el-popconfirm 文档中定义的两个按钮事件在当前版本（2.13.2）中无效，作者推测可能是 reset CSS 写法不同导致样式错乱，但未深入探究，并欢迎指正。
对于 ElementUI 的这些未公开玩法和坑，作者最终的建议是什么？
作者建议：如果没有强迫症、对小瑕疵无所谓，可以直接使用；如果是设计师兼前端且有重度强迫症，建议自己写样式；如果领导坚持要用，就说服领导并告知所有缺点。
