一、一次性渲染大量數據問題
如業務場景是後臺一次返回10萬多條數據需要在下拉框中展示:
<template>
<div class="content">
<el-select v-model="choose" size="small" v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)">
<el-option
v-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-option
v-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.stashList
this.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>