因下拉列表我拿来做人要筛选,人要涉及很多几千个,全部加载会导致客户端卡死情况,便想通过加载更多方式逐步加载,直接上代码
1.前端页面
代码:
<el-form :model="turnToForm" :rules="turnToFormRules" ref="turnToForm" label-width="100px"
class="demo-ruleForm">
<el-form-item label="转派人员" prop="personArray">
<el-select
v-model="turnToForm.personArray"
multiple
filterable
remote
placeholder="工号/姓名"
:remote-method="remoteLoadUser"
:loading="loading"
style="width: 100%;"
>
<el-option
v-for="item in userOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
<div style="font-size: 13px;padding-left: 22px;color: gray;cursor: pointer"
v-if="flagElse"
@click="loadmoreFun()">
加载更多
</div>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="turnToFormSumbit()">确定</el-button>
<el-button @click="turnToDialog=false">取消</el-button>
</el-form-item>
</el-form>
其中el-option 中 :key=“item.value” 很关键,如果同一个页面该人员下拉列表创建了多个,共用一个 userOptions 数据集合,另外的下拉列表搜索会影响已选择的下拉列表值(在下拉列表值value与显示值label不一样情况下)
new Vue({
el: '#app',
data: function () {
return {
loading: false,
userOptions: [],
userOptionsKey: "",
userOptionsKeyNum: 1,
flagElse: false
}
}, mounted() {
var that = this;
// 异步获取 数据
that.loadLoginUserData();
that.loadTableData();
}, methods: {
remoteLoadUser(key) {
var that = this;
that.userOptionsKey = key;
that.userOptionsKeyNum = 1;
$.ajax({
type: 'POST',
url: '${path}/board/comm/getSysUserToSelectList',
data: {userName: key, page: that.userOptionsKeyNum},
success: function (res) {
that.userOptions = [];
if (res.status == 200) {
that.flagElse = res.data.flagElse;
that.userOptions = res.data.list;
} else {
that.userOptions = [];
}
}
});
}, loadmoreFun() {
var that = this;
that.userOptionsKeyNum = that.userOptionsKeyNum + 1;
$.ajax({
type: 'POST',
url: '${path}/board/comm/getSysUserToSelectList',
data: {userName: that.userOptionsKey, page: that.userOptionsKeyNum},
success: function (res) {
if (res.status == 200) {
that.flagElse = res.data.flagElse;
var list = res.data.list;
//数组放置
for (var i = 0; i < list.length; i++) {
that.userOptions.push(list[i]);
}
} else {
that.userOptions = [];
}
}
});
}
}
})
后端查询分页处理
@ResponseBody
@RequestMapping("/getSysUserToSelectList")
public Result getSysUserToSelectList(SysUser sysUser, PageParam pageParam) {
Page<SysUser> page = sysUserService.getPage(sysUser, pageParam);
List<SysUser> list = page.getData();
List<Map<String, String>> mapList = new ArrayList<>();
for (int i = 0; i < list.size(); i++) {
SysUser dom = list.get(i);
Map<String, String> map = new HashMap<>();
map.put("label", dom.getUserCode() + "(" + dom.getUserName() + ")");
map.put("value", dom.getUserCode());
mapList.add(map);
}
Map<String, Object> ret = new HashMap<>();
ret.put("list", mapList);
ret.put("pageCount", page.getPageCount());
boolean flagElse = true;
if (Objects.equals(page.getPageCount(), page.getPageNo())) {
flagElse = false;
}
ret.put("flagElse", flagElse);
return Result.successfulResult(HttpMsg.QUERY_SUCCESS, ret);
}