第一种方法:添加分页,页面样式如下,JS逻辑与平常分页没区别
<el-select :disabled="noChange[index]==true || applyDataItem.processKey == 'componentFastAdd'" style="width:68%" v-model="chooseUser[index]" clearable filterable placeholder="请选择人员"> <div class="option"> <el-option v-for="user in allUsers" :key="user.id" :label="user.userName" :value="user.id"> </el-option> </div> <div class="pagin"> <el-pagination small @size-change="sizeChange" :current-change="currentChange" :page-size="pageSize" layout="prev, pager,next,total" :total="total" > </el-pagination> </div> </el-select>
css
.option{ min-height: 100px; height: auto; max-height: 200px; overflow-y: auto; } .pagin{ background:#fff; } ::-webkit-scrollbar{ width: 2px; }
第二种方法:下拉加载更多
1.写一个指令
/** * select 下拉框 底部触发指令 */ Vue.directive('selectLoadMore',{ bind (el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener('scroll', function () { if (this.scrollHeight - this.scrollTop < this.clientHeight + 1) { binding.value() } }) } })
2.页面使用指令,添加远程搜索属性和方法
<el-select style="width:68%" v-model="chooseUser[index]" clearable filterable v-selectLoadMore="selectLoadMore" :loading="loading" remote :remote-method="remoteMethod" placeholder="请选择人员"> <el-option v-for="user in allUsers" :key="user.id" :label="user.userName" :value="user.id"> </el-option> </el-select>
3.JS写逻辑
// 下拉加载更多 selectLoadMore() { this.search.pageNum = this.search.pageNum + 1; if (this.search.pageNum > this.totalPage) return; this.readAllUsers(); // 请求接口 }, // 远程搜索 remoteMethod(query) { this.loading = true; this.search.query = query; this.search.pageNum = 1; this.allUsers = []; setTimeout(() => { this.loading = false; this.readAllUsers(); // 请求接口 }, 200) }, // 获取数据 readAllUsers() { let params = { num:this.search.pageNum, size:this.search.pageSize, userName:this.search.query, } readUserPageList(params).then((res) => { this.totalPage = res.pages; this.total = res.total; this.allUsers = this.allUsers.concat(res.data); }); },