el-scrollbar 滚动条
看到这个组件是不是有点生疏，生疏就对了，因为它素来没有呈现在 element 官网上（预计是性能问题），但好货色怎么能藏着掖着，来上效果图。
是不是比原生的滚动条好看多了，应用办法也非常简单：
<el-scrollbar>
<div class="box">
<p v-for="item in 15" :key="item"> 欢送应用 el-scrollbar {{item}}</p>
</div>
</el-scrollbar>
<style scoped>
.el-scrollbar {
border: 1px solid #ddd;
height: 200px;
}
.el-scrollbar ::v-deep .el-scrollbar__wrap {
overflow-y: scroll;
overflow-x: hidden;
}
</style>只有 scrollbar 外部盒子的高度超过 scrollbar 的高度就会呈现滚动条，横向滚动条同理。
el-upload 模仿点击
有时候咱们想用 el-upload 的上传性能，但又不想用 el-upload 的款式，如何实现呢？办法也很简略，暗藏 el-upload，而后再模仿点击就能够了。
<button @click="handleUpload"> 上传文件 </button>
<el-upload
v-show="false"
class="upload-resource"
multiple
action="":http-request="clickUploadFile"ref="upload":on-success="uploadSuccess"
>
上传本地文件
</el-upload>
<script>
export default {
methods: {
// 模仿点击
handleUpload() {document.querySelector(".upload-resource .el-upload").click()},
// 上传文件
async clickUploadFile(file) {const formData = new FormData()
formData.append('file', file.file)
const res = await api.post(`xxx`, formData)
}
// 上传胜利后，清空组件自带的文件列表
uploadSuccess() {this.$refs.upload.clearFiles()
}
}
}
</script>el-select 下拉框选项过长
很多时候下拉框的内容是不可控的，如果下拉框选项内容过长，势必会导致页面十分不协调，解决办法就是，单行省略加文字提醒。
<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="请抉择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-tooltip
placement="top"
:disabled="item.label.length<17"
>
<div slot="content">
<span>{{item.label}}</span>
</div>
<div class="iclass-text-ellipsis">{{item.label}}</div>
</el-tooltip>
</el-option>
</el-select>
<script>
export default {data() {
return {
options: [{
value: '选项 1',
label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
}, {
value: '选项 2',
label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶'
}, {
value: '选项 3',
label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎'
}],
value: ''
}
}
}
</script>
<style scoped>
.el-select {width: 300px;}
.el-select ::v-deep .popper-class {width: 300px;}
.iclass-text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>成果如下：
el-input 首尾不能为空格
咱们在应用 input 输入框时，大多不心愿用户在前后输出空格，有没有简略的校验办法呢，当然是有的。
<el-form :rules="rules" :model="form" label-width="80px">
<el-form-item label="流动名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<script>
export default {data() {
return {
form: {name: ''},
rules: {
name: [{ required: true, message: '请输出流动名称', trigger: 'blur'},
{pattern: /^(?!\s+).*(?<!\s)$/, message: '首尾不能为空格', trigger: 'blur' }
]
}
}
}
}
</script> 成果如下：
el-input type=number 输出中文，焦点上移
当 el-input 设置 type=”number” 时，输出中文，尽管中文不会显示进去，但焦点会上移。
解决办法：
<style scoped>
::v-deep .el-input__inner {line-height: 1px !important;}
</style>el-input type=number 去除聚焦时的高低箭头
解决办法：
<el-input class="clear-number-input" type="number"></el-input>
<style scoped>
.clear-number-input ::v-deep input[type="number"]::-webkit-outer-spin-button,
.clear-number-input ::v-deep input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none !important;}
</style>el-form 只校验表单其中一个字段
有时候咱们须要独自校验一些字段，比方发送验证码，独自对手机号进行校验，能够这样做：
this.$refs.form.validateField('phone', valid => {if (valid) {console.log('send!');
} else {console.log('error send!');
return false;
}
})el-dialog 从新关上弹窗，革除表单信息
有人会在关上弹窗时，在 $nextTick 里重置表单，而我抉择在敞开弹窗后进行重置：
<el-dialog @closed="resetForm">
<el-form ref="form">
</el-form>
</el-dialog>
<script>
export default {
methods: {resetForm() {this.$refs.form.resetFields()
}
}
}
</script>el-dialog 的 destroy-on-close 属性设置有效
destroy-on-close 设置为 true 后发现弹窗敞开后 DOM 元素仍在，没有被销毁。
解决办法：在 el-dialog 上增加 v-if。
<el-dialog :visible.sync="visible" v-if="visible" destroy-on-close>
</el-dialog>el-table 表格内容超出省略
当表格内容过长时，手动增加款式比拟麻烦，偷偷通知你，只须要增加一个 show-overflow-tooltip 就能够搞定。
<el-table-column
prop="address"
label="地址"
width="180"
show-overflow-tooltip
>
</el-table-column> 成果如下：
欢送评论区交换，如果对你有所帮忙，不要忘了点个赞~
据说点赞的往年桃花运贼旺😍