el-select二次封装实现可分页加载数据

使用el-select时一次性渲染几百条数据时会造成页面克顿, 可以通过分页来实现, 这里我用的方式为默认获取全部数据, 然后一次性截取10条进行展示, 滚动条触底后会累加, 大家也可以优化为滚动条触底后发送请求去加载数据

• 创建自定义指令customizeFocus用户懒加载
  在utils文件夹(大家可自定义)下创建customizeFocus.vue

import Vue from 'vue'/*** 封装el-selectt懒加载指令* */
Vue.directive('customizeFocus',{bind(el,binding){let SELECT_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");SELECT_DOM.addEventListener("scroll", function () {let condition = this.scrollHeight - this.scrollTop <= this.clientHeight;if (condition) {binding.value();}});}
});

• 创建select.vue文件用来编写分页加载代码

<template><div><el-select v-model="value1" collapse-tags :multiple="isMultiple" filterable :placeholder="placeholder"v-customizeFocus="lazyloading" @change="submit()"><el-option v-for="item in stationOptions" :key="item.id" :label="item.label" :value="item.vBindValue"><span style="float: left;padding-right: 30px;">{{ item.label }}</span><span style="float: left;padding-right: 30px;">id:-{{ item.id }}</span><span style="float: right; color: #8492a6; font-size: 13px">{{ item.describe }}</span></el-option></el-select></div>
</template><script>
/*** cur：每页显示多少条, 默认值: 10, 类型: number* stationDataList: 已选择的数据, 默认值: [], 类型: array* isMultiple: 是否多选, 默认值: false, 类型: boolean* returnValue: 返回值内容, 默认值: 数据id, 类型: string* placeholder: 提示, 默认值: 请选择, 类型: string* */
export default {name: "selectModel",data() {return {value1: null,// el-select展示的数据stationOptions: [],// 全部数据stationAll: [],// 测点懒加载分页stationLazy: {startCur: 0,// 当前页码数据pageNum: 1,},stationData: this.stationDataList}},props: {isMultiple: {default: false,type: Boolean},stationDataList: {default: Array,type: Array},placeholder: {default: '请选择',type: String},returnValue: {default: 'id',type: String},cur: {default: 10,type: Number}},mounted() {this.getStationAll();},methods: {/*** 获取全部测点数据* */getStationAll() {let returnValue = this.returnValue;for (let i = 0; i < 100; i++) {let obj = {label: 'test_tag' + i+1,id: i+1,describe: 'test_tag' + i+1 + '描述'};this.stationAll.push(obj);}// 设置el-option的value绑定值if (this.stationAll && this.stationAll.length){this.stationAll.forEach(item=>{item['vBindValue'] = item[returnValue]})this.stationOptions = this.stationAll.slice(this.stationLazy.startCur, this.cur);// 查看this.matchingData();}},/*** 匹配stationData里的数据,将其显示到下拉列表中* */matchingData(){if (this.stationData && this.stationData.length){this.value1 = [];let returnValue = this.returnValue;// 1.先查看当前显示的option里是否存在,如果不存在,从全部数据里获取this.stationData.forEach(eachItem=>{let stationIndex = this.stationOptions.map(mapItem=>mapItem[returnValue]).indexOf(eachItem);if (stationIndex !== -1){this.value1.push(this.stationOptions[stationIndex][returnValue]);} else {let stationAllIndex = this.stationAll.map(mapItem=>mapItem[returnValue]).indexOf(eachItem);if (stationAllIndex !== -1){this.stationOptions.push(this.stationAll[stationAllIndex]);this.value1.push(this.stationAll[stationAllIndex][returnValue]);}}})}},/*** 滚动条触底时触发此方法* */lazyloading() {if (this.stationAll.length > 0){// 计算总数据共有多少页let total = Math.ceil(this.stationAll.length / this.cur);// 如果计算总页码数小于等于当前页码数证明已到最后一页if (total <= this.stationLazy.pageNum){return console.log('已加载全部数据');}this.stationLazy.pageNum ++;this.stationOptions = this.stationAll.slice(this.stationLazy.startCur, this.cur * this.stationLazy.pageNum);this.matchingData();}},/*** 提交* */submit(){this.stationData = JSON.parse(JSON.stringify(this.value1));this.$emit('callBackData',this.stationData)},}
}
</script><style scoped></style>

• 在主文件里使用,

<template><div><selectModel :stationDataList="stationDataList" v-if="stationDataList.length" :isMultiple="true" @callBackData="callBackData"></selectModel></div>
</template><script>import selectModel from '../../components/select/index'export default {name: "index",components:{selectModel},data(){return {stationDataList: [1,2,3,50,100], // 模拟获取出来的数据,数据id}},mounted(){},methods:{/*** 返回值* */callBackData(e){console.log(e,'eeeeeeeeeee')}}}
</script><style scoped></style>