Element-UI 10个奇淫技巧小结
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.$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>
效果如下:
到此这篇关于Element-UI 10个奇淫技巧小结的文章就介绍到这了,更多相关Element 奇淫技巧内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
解决Element-ui el-table合计行 show-summary 不显示的问题
有时候需要在table的底部有合计,这时候官方给的是在table里设置,show-summary就可以了但是给table加了一个固定高度的话,就不显示了,打开控制台可以看到这个合计是存在的那么需...2020-12-11- photoshop软件是一款专业的图像设计软件了,但对电脑的要求也是越高越好的,如果配置一般打开ps会比较慢了,那么photoshop打开很慢怎么办呢,下面来看问题解决办法。 1、...2016-09-14
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- 这篇文章主要介绍了Element PageHeader页头的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》,探讨它的设计思想。今天,我想总结一下PHP语言对它的支持,这是开发互联网应用程序(特别是编写API)必须了解的知识...2015-10-30
- 刷票行为,一直以来都是个难题,无法从根本上防止。但是我们可以尽量减少刷票的伤害,比如:通过人为增加的逻辑限制。基于 PHP,下面介绍防刷票的一些技巧:1、使用CURL进行信息伪造$ch = curl_init(); curl_setopt($ch, CURLOP...2015-11-24
- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
- 通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识,对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24
- 这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
- 这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要介绍了Element-ui upload上传文件限制的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-25
- 这篇文章主要介绍了Element Card 卡片的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-26
- 本篇文章介绍了我在爬虫过程中总结的几个必备技巧,都是经过实验的,通读本篇对大家的学习或工作具有一定的价值,需要的朋友可以参考下...2021-10-22
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
这篇文章主要介绍了Element-ui 自带的两种远程搜索(模糊查询)用法讲解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-29- 本文主要介绍了vue+element实现动态换肤的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-07
- 这篇文章主要介绍了分享12个非常实用的JavaScript小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题,需要的朋友可以参考下...2016-05-14
- 这篇文章主要介绍了vue element后台鉴权流程分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-10
- 这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-19