vue+elementui--下拉框中的数据量太大,可以进行懒加载处理
vue+elementui--下拉框中的数据量太大,可以进行懒加载处理
·
- 下拉框代码
<el-form-item label="资源" prop="resourceId"> <el-select v-model="form.resourceId" filterable placeholder="请选择" clearable :popper-append-to-body="false" v-el-select-loadmore="loadmore" // 这个是懒加载需要加的 :filter-method="searchResource" @change="changeResourceId" style="width:100%" > <el-option v-for="item in workOption" :key="item.resourceId" :label="item.resourceName" :value="item.resourceId"> </el-option> </el-select> </el-form-item>
- js部门的初期化处理
export default{ name: "", directives: { 'el-select-loadmore':{ bind(el, binding){ const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener('scroll', function(){ /** * scrollHeight 获取元素内容高度(只读) * scrollTop 获取或者设置元素的偏移值,常用于计算滚动条的位置,当一个元素的容器没有产生垂直方向的滚动条,那它的scrollTop值默认为0 * clientHeight 获取元素的可见高度(只读) * 如果元素滚动到底,下面的等式返回true,没有则返回false * **/ const condition = (this.scrollHeight - this.scrollTop) <= (this.clientHeight+10); if(condition){ binding.value(); } }) } } }, data(){ selectWorkParams: { pageNum: 1, // 设置当前页数 pageSize: 200, // 设置一页显示多少条数据 resourcesType: null, // 设置其他的查询条件 resourceName: null // 设置其他的查询条件 }, resourceTotal: 0, selectResourceName: null, workOption:[], }
- js部分逻辑处理
searchResource(val){ this.selectResourceName = val; this.workOption = new Array(); this.selectWorkParams.pageSize = 200; this.selectWorkParams.pageNum = 1; // 资源名称 this.selectWorkParams.resourceName = val; // 资源类型 this.selectWorkParams.resourcesType = this.form.resourcesType; getResourceTypeList(this.selectWorkParams).then(response => { this.resourceTotal = response.rows.length; if(this.workOption.length > 0){ this.workOption = this.workOption.concat(response.rows); }else{ this.workOption = response.rows; } }); }, loadmore(){ if(this.resourceTotal === 200){ this.selectWorkParams.pageNum++; this.searchLoadResource(this.selectResourceName); } }, searchLoadResource(val){ // 资源名称 this.selectWorkParams.resourceName = val; // 资源类型 this.selectWorkParams.resourcesType = this.form.resourcesType; getResourceTypeList(this.selectWorkParams).then(response => { this.resourceTotal = response.rows.length; if(this.workOption.length > 0){ var pushFlg = ''; // 这个循环是因为下拉框滚动条的时候,有时会揍两遍方法,导致数据重复添加 // 循环中的判断是为了不让数据重复添加 for(var i =0; i < this.workOption.length; i++){ if(this.workOption.findIndex(item => item.resourceId === response.rows[i].resourceId) < 0){ pushFlg = 'push'; break; } } if(pushFlg === 'push'){ this.workOption = this.workOption.concat(response.rows); } }else{ this.workOption = response.rows; } }); },
更多推荐
已为社区贡献1条内容
所有评论(0)