場景一 解決了一次性渲染大量數據問題

業務場景是后臺一次返回10萬多條數據需要在下拉框中展示,直接渲染會導致頁面卡頓且需要很長時間等待,用戶體驗極差,所以我把這個改造了一下,直接上代碼, 里面注釋寫的很清楚了就不解釋了.

<template><div class="content"><el-select v-model="choose" size="small" v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)"><el-optionv-for="(item, index) in list.slice(0, rangeNumber)" :key="index":label="item.label":value="item.value"></el-option></el-select></div> </template><script> 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.clientHeight;if (condition) binding.value()});}} ) export default {data() {return {list: [],choose: "",rangeNumber: 10,}},created(){this.getList()},methods: {getList(){for(let i = 0; i < 100000; i++){this.list.push({label: "menu",value: "menu"})}//測試數據10萬條數據, 這里數據多少條無所謂,list.slice(0, rangeNumber)方法只會默認加載初始的10條數據},loadMore(n){//n是默認初始展示的條數會在渲染的時候就可以獲取,具體可以打log查看//if(n < 8) this.rangeNumber = 10 //elementui下拉超過7條才會出滾動條,如果初始不出滾動條無法觸發loadMore方法return () => this.rangeNumber += 5 //每次滾動到底部可以新增條數 可自定義},} } </script><style lang="less" scoped> .content{padding: 24px 24px;.el-input{width: 400px;margin: 20px;} } </style>

場景二 10萬條數據客戶不可能一直滾動下去找自己想要數據,這時候就需要搜索解決

下面代碼沒有用el-select搜索是因為在使用過程中發現模糊查詢不能滿足自己,所以自己就寫了一個input框,使用watch監聽,詳情見代碼

<template><div class="content"><el-select v-model="choose" size="small" v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)"><el-input v-model="search" size="small" placeholder="請輸入搜索內容"></el-input><el-optionv-for="(item, index) in list.slice(0, rangeNumber)" :key="index":label="item.label":value="item.value"></el-option></el-select></div> </template><script> 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.clientHeight;if (condition) binding.value()});}} ) export default {data() {return {list: [],choose: "",rangeNumber: 10,stashList: [],search: ""}},created(){this.getList()},watch: {search(newVal, oldVal){if(newVal){this.list = this.stashListthis.list = this.list.filter(item => {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 //每次滾動到底部可以新增條數 可自定義},} } </script><style lang="less" scoped> .content{padding: 24px 24px;.el-input{width: 400px;margin: 20px;} } </style>

文章寫至此數據量大的問題已經基本解決,在寫的過程中突然覺得,slice方法還是怪怪的, 這里還可以用別的方法,關于slice方法就寫到這里了.

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的解决el-select后台一次返回大数据量渲染慢导致页面卡顿的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。