Element-ui 下拉选项分页加载

因下拉列表我拿来做人要筛选，人要涉及很多几千个，全部加载会导致客户端卡死情况，便想通过加载更多方式逐步加载，直接上代码

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);
    }