Element-UI10个奇淫技巧⼩结
⽬录
el-scrollbar 滚动条
el-upload 模拟点击
el-select 下拉框选项过长
el-input ⾸尾不能为空格
el-input type=number 输⼊中⽂，焦点上移
el-input type=number 去除聚焦时的上下箭头
el-form 只校验表单其中⼀个字段
el-dialog 重新打开弹窗，清除表单信息
el-dialog 的 destroy-on-close 属性设置⽆效
el-table 表格内容超出省略
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('name', 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.$setFields()
}
}
element表格横向滚动条}
</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>
效果如下：
到此这篇关于Element-UI 10个奇淫技巧⼩结的⽂章就介绍到这了，更多相关Element 奇淫技巧内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。