--- theme: cyanosis --- 本文已参与「[掘力星计划](https://juejin.cn/post/7012210233804079141/ "https://juejin.cn/post/7012210233804079141/")」，赢取创作大礼包，挑战创作激励金。 ### el-scrollbar 滚动条看到这个组件是不是有点陌生，陌生就对了，因为它从来没有出现在 element 官网上（估计是性能问题），但好东西怎么能藏着掖着，来上效果图。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47ecaf4a75224000b02043d9d17fc6ce~tplv-k3u1fbpfcp-watermark.image?) 是不是比原生的滚动条美观多了，使用方法也非常简单： ```

欢迎使用 el-scrollbar {{item}}

``` 只要 scrollbar 内部盒子的高度超过 scrollbar 的高度就会出现滚动条，横向滚动条同理。 ### el-upload 模拟点击有时候我们想用 el-upload 的上传功能，但又不想用 el-upload 的样式，如何实现呢？方法也很简单，隐藏 el-upload，然后再模拟点击就可以了。 ```

上传本地文件

``` ### el-select 下拉框选项过长很多时候下拉框的内容是不可控的，如果下拉框选项内容过长，势必会导致页面非常不协调，解决办法就是，单行省略加文字提示。 ```

``` 效果如下： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c87b9654ff484f46a6a3a176f0c2c347~tplv-k3u1fbpfcp-watermark.image?) ### el-input 首尾不能为空格我们在使用 input 输入框时，大多不希望用户在前后输入空格，有没有简单的校验方法呢，当然是有的。 ```

``` 效果如下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9f5694eca6b456e988f6c5880654f1a~tplv-k3u1fbpfcp-watermark.image?) ### el-input type=number 输入中文，焦点上移当 el-input 设置 type="number" 时，输入中文，虽然中文不会显示出来，但焦点会上移。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b114ec274264869a12d97e35b9ae47e~tplv-k3u1fbpfcp-watermark.image?) 解决办法： ``` ``` ### el-input type=number 去除聚焦时的上下箭头 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d715302792b43258c253cfa449e14b7~tplv-k3u1fbpfcp-watermark.image?) 解决办法： ``` ``` ### el-form 只校验表单其中一个字段有时候我们需要单独校验一些字段，比如发送验证码，单独对手机号进行校验，可以这样做： ``` this.$refs.form.validateField('name', valid => { if (valid) { console.log('send!'); } else { console.log('error send!'); return false; } }) ``` ### el-dialog 重新打开弹窗，清除表单信息有人会在打开弹窗时，在$nextTick里重置表单，而我选择在关闭弹窗后进行重置： ```

``` ### el-dialog 的 destroy-on-close 属性设置无效 destroy-on-close 设置为 true 后发现弹窗关闭后 DOM 元素仍在，没有被销毁。解决办法：在 el-dialog 上添加 v-if。 ``` ``` ### el-table 表格内容超出省略当表格内容过长时，手动添加样式比较麻烦，偷偷告诉你，只需要添加一个 show-overflow-tooltip 就可以搞定。 ``` ``` 效果如下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c41012695f0c43d6a6f0e5df018fc2cf~tplv-k3u1fbpfcp-watermark.image?) 欢迎在评论区留言，掘金官方将在[掘力星计划](https://juejin.cn/post/7012210233804079141 "https://juejin.cn/post/7012210233804079141")活动结束后，在评论区抽送100份掘金周边。如果文章对你有所帮助，不要忘了点个赞~ 听说点赞的今年桃花运贼旺😍