element select 下拉数据滚动分页且可搜索
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
由于下拉项过多,加载速度过慢,所以采用下拉加载方式,同时搜索改为后台搜索,其中remoteMethod就是后台搜索绑定的方法,后台搜索时输入框无法判断是搜索还是选中,所以使用multiple 并且:multiple-limit="1"
<el-form-item id="loadMoreSelect" :label="下拉" style="width: 100%;">
<el-select :placeholder="请选择" v-model="selectedUser"
v-validate="'required'"
multiple
:multiple-limit="1"
clearable
name="project"
style="width: 100%;"
filterable
remote
:remote-method="remoteMethod"
>
<el-option v-for="item in userList" :key="item.id"
:value="item.id"
:label="item.name"
></el-option>
<span class="validate-message">{{errors.first('project')}}</span>
</el-select>
</el-form-item>
remoteMethod(query) {
this.query = query;
//如果搜索框是空的,就访问原始数据,否则从后台搜索
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.searchData(query);
}, 200);
} else {
//userList就是select绑定的可选数据
this.userList = this.userListInite;
}
},
async searchData(query) {
await ....
//获得数据data,然后赋给userList
this.userList = data;
},
mounted() {
// 规定下拉框每页显示15条,通过改变页码改变显示总数目。
//初始化第一页原始数据
this.loadUserList({ currentPage: 1 });
//给select下拉添加滚动监测
this.setLoadMore()
},
// 用户列表下添加用户的用户下拉列表
async loadUserList(params) {
const that = this;
const { currentPage } = params;
try {
const { data } = await that.$。。。。( {
currentPage: currentPage,
pageSize: 15
});
if (data) {
that.userListInite = that.userListInite.concat(data);
that.userList = that.userListInite;
}
if (that.userListInite.length >= data.totalElements) {
//已获取全部数据标志,当已获取全部数据时,不再访问接口拉取数据。
that.getAll = true;
}
} catch {
console.log('bug');
}
},
//给select框加滚动监测
setLoadMore() {
const that = this;
//获得元素
const loadSelectElement = document.getElementById('loadMoreSelect').getElementsByClassName('el-select-dropdown__wrap')[0];
function scrollLoadData() {
// 当滚动条高度等于卷入高度+可视高度时,说明到达底部,scrollHeight :滚动条高度,scrollTop :已卷入不可见的滚动条高度,clientHeight:可见的滚动条高度。
const scrollDistance = loadSelectElement.scrollHeight - loadSelectElement.scrollTop - loadSelectElement.clientHeight;
// 非搜索
if (scrollDistance <= 0 && !that.query) {
//页码依次加1
that.loadUserList({ currentPage: that.currentPage += 1 });
}
}
loadSelectElement.addEventListener('scroll', scrollLoadData,);
//如果已加载完全部数据,取消监听
if (that.getAll) {
loadSelectElement.removeEventListener('scroll', scrollLoadData);
}
},
优化建议:可以考虑加个debounce防抖函数
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)