| 解决el | 您所在的位置：网站首页 › vue加载数据慢 › 解决el |
解决el
|
场景一 解决了一次性渲染大量数据问题
业务场景是后台一次返回10万多条数据需要在下拉框中展示,直接渲染会导致页面卡顿且需要很长时间等待,用户体验极差,所以我把这个改造了一下,直接上代码, 里面注释写的很清楚了就不解释了. import Vue from "vue"; Vue.directive( 'el-select-loadmore', { bind(el, binding) { let self = this // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'); SELECTWRAP_DOM.addEventListener('scroll', function () { /** * scrollHeight 获取元素内容高度(只读) * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0. * clientHeight 读取元素的可见高度(只读) * 如果元素滚动到底, 下面等式返回true, 没有则返回false: * ele.scrollHeight - ele.scrollTop === ele.clientHeight; */ const condition = this.scrollHeight - this.scrollTop this.rangeNumber += 5 //每次滚动到底部可以新增条数 可自定义 }, } } .content{ padding: 24px 24px; .el-input{ width: 400px; margin: 20px; } }
场景二 10万条数据客户不可能一直滚动下去找自己想要数据,这时候就需要搜索解决
下面代码没有用el-select搜索是因为在使用过程中发现模糊查询不能满足自己,所以自己就写了一个input框,使用watch监听,详情见代码 import Vue from "vue"; Vue.directive( 'el-select-loadmore', { bind(el, binding) { let self = this // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'); SELECTWRAP_DOM.addEventListener('scroll', function () { /** * scrollHeight 获取元素内容高度(只读) * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0. * clientHeight 读取元素的可见高度(只读) * 如果元素滚动到底, 下面等式返回true, 没有则返回false: * ele.scrollHeight - ele.scrollTop === ele.clientHeight; */ const condition = this.scrollHeight - this.scrollTop { if(item.label.includes(newVal)){ return item } }) }else{ this.list = this.stashList } } }, methods: { getList(){ for(let i = 0; i < 100000; i++){ this.list.push({ label: "menu" + i, value: "menu" + i }) }//测试数据10万条数据, 这里数据多少条无所谓,list.slice(0, rangeNumber)方法只会默认加载初始的10条数据 this.stashList = this.list }, loadMore(n){ //n是默认初始展示的条数会在渲染的时候就可以获取,具体可以打log查看 //if(n < 8) this.rangeNumber = 10 //elementui下拉超过7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法 return () => this.rangeNumber += 5 //每次滚动到底部可以新增条数 可自定义 }, } } .content{ padding: 24px 24px; .el-input{ width: 400px; margin: 20px; } }文章写至此数据量大的问题已经基本解决,在写的过程中突然觉得,slice方法还是怪怪的, 这里还可以用别的方法,关于slice方法就写到这里了.
爱分享,爱生活, 加油!!!!
|
【本文地址】
公司简介
联系我们