el-select用懒加载，回显时未加载的是数据显示id不显示人名解决办法

el-select用懒加载，回显时未加载的是数据显示id不显示人名解决办法

原因：有的能回显出来、有的显示id是因为用了懒加载，那些人名还没被加载出来
思路：先把要回显的数据提出来，再提出剩余数据，两个数组拼接起来

<template>
    <div class="modal">
        <div class="form-item">
            <el-form ref="form" :model="form" label-width="100px" :rules="rules">
                <el-form-item label="角色：" prop="roleName">
                    <el-select
                        style="width: 100%"
                        v-model="form.roleName"
                        placeholder="请选择"
                        clearable
                        filterable
                    >
                        <el-option
                            v-for="item in roleOptions"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.roleName"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="用户：" prop="users">
                    <el-select style="width: 100%"
                               v-model="form.users" placeholder="请选择"
                               multiple
                               clearable
                               filterable
                               :filter-method="dataFilter"
                               v-el-select-loadmore.rangeNumber="loadmore(rangeNumber)"
                    >
                        <el-option
                            v-for="item in newUserList.slice(0,rangeNumber)"
                            :key="item.id"
                            :label="item.userName"
                            :value="item.userId"

                        />
                    </el-select>
                </el-form-item>


            </el-form>
        </div>
        <!-- 底部的保存和取消按钮组件 -->
        <div class="menu">
            <modal-menu @comfirmHandle="save"></modal-menu>
        </div>
    </div>
</template>
<script>
import modalMenu from "@components/modal-menu.vue";
import {addRoleUser} from "@api/index"

export default {
    components: {
        modalMenu,
    },
    directives: {
        'el-select-loadmore': {
            bind(el, binding) {
                // 获取element-ui定义好的scroll盒子
                const SELECTWRAP_DOM = el.querySelector('.el-scrollbar__wrap');
                SELECTWRAP_DOM.addEventListener('scroll', function () {
                    /**
                     * scrollHeight 获取元素内容高度(只读)
                     * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                     * clientHeight 读取元素的可见高度(只读)
                     * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                     * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                     * -2 ：个别浏览器获取像素不足整数，导致condition一直为false无法实现滚动加载
                     */
                    const condition = this.scrollHeight - this.scrollTop - 2 <= this.clientHeight;
                    if (condition) {
                        binding.value();
                    }
                }, true);
            }
        }
    },
    props: {
        newRow: Object,
        type: String,
        userOptions: Array,
        roleOptions: Array,
    },

    data() {
        return {
            form: {},
            rules: {
                roleName: [{required: true, message: '内容不能为空', trigger: ["blur", "change"]}],
                users: [{required: true, message: '内容不能为空', trigger: ["blur"]}],
            },
            newUserList: [], //人员过滤后的数据
            rangeNumber: 100,//初始加载条数
            tempList1:[],
            tempList2:[],
        };
    },

    mounted() {
        if (this.type == 'edit') {
            this.form = this.newRow
        }
        this.temp(this.userOptions)
    },
    methods: {
        temp(userList){
            //编辑时：数据回显时把我们选中的数据加在人名列表最前面
            if (this.type == 'edit') {
                this.tempList2=[...this.tempList2,...userList]
                let arr = this.form.users
                for (let item of arr) {
                    for (let j = 0; j < userList.length; j++) {
                        if (userList[j].userId == item) {
                            this.tempList1.push(userList[j])
                            // this.tempList2.splice(j, 1)//此处删除只适用一个数据时，index删除后后面的index会变
                        }
                    }
                }
                this.tempList2=this.tempList2.filter(v =>
                    // every() 方法用于检测数组所有元素是否都符合指定条件,此时的v就不等于dataList数组中的任何一个元素
                    this.tempList1.every(n => {
                        return n.userId !== v.userId;
                    })
                );
                //tempList1存选中的人 tempList2除选中的人，两数组再拼接
                this.newUserList = [...this.tempList1, ...this.tempList2];
            }else{
                this.newUserList =[...this.newUserList,...userList]
            }

        },
        getList(userList) {
            for (let i = 0; i < userList.length; i++) {
                this.newUserList.push(userList[i])
            }
        },
        dataFilter(val) {//未懒加载出来的数据也可被搜索到
            this.newUserList = []
            if (val) {
                this.newUserList = this.userOptions.filter((item) => {
                    if (item.userName && item.userName.indexOf(val) !== -1) {
                        return true
                    }
                })
            } else { //val为空时，还原数组
                this.getList(this.userOptions)
            }
        },

        loadmore() {
            return () => {
                this.rangeNumber += 10//滚动新增条数
            }
        },
        save() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    let param = {}
                    for (let item of this.roleOptions) {
                        if (item.roleName === this.form.roleName) {
                            param.roleId = item.id
                            param.roleName = item.roleName
                            param.roleDesc = item.roleDesc
                        }
                    }

                    if (this.type == 'edit') {
                        param.id = this.form.id
                    } else {
                        param.id = ""
                    }

                    param.userList = []
                    let arr = this.form.users
                    for (let item of arr) {
                        for (let j of this.userOptions) {
                            if (j.userId == item) {
                                param.userList.push({userId: j.userId, userName: j.userName})
                            }
                        }
                    }
                    addRoleUser(param).then(() => {
                        this.$message("操作成功")
                        this.$emit('confirmSuccess')
                        this.$emit('close')
                    })
                } else {
                    return false;
                }
            });
        },


        save2() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    let param = []
                    let roleId = ""
                    for (let item of this.roleOptions) {
                        if (item.roleName === this.form.roleName) {
                            roleId = item.id
                        }
                    }
                    let arr = this.form.users
                    for (let item of arr) {
                        for (let j of this.userOptions) {
                            if (j.id == item) {
                                param.push({id: "", roleId: roleId, userId: j.id, userName: j.userName})
                            }
                        }
                    }
                    // addRoleUser(param).then(() => {
                    //     this.$message("操作成功")
                    //     this.$emit('confirmSuccess')
                    //     this.$emit('close')
                    // })
                } else {
                    return false;
                }
            });
        },

    },
};
</script>

<style lang="scss" scoped>
.modal {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 50px 40px 0 20px;
}

::v-deep .el-form-item__error {
    margin-top: -13px;
}

::v-deep .el-form-item__label {
    font-weight: 900;
}

::v-deep .el-form-item {
    margin-bottom: 40px;
}

::v-deep .el-select__tags {
    max-height: 120px;
    overflow-y: auto;
}
</style>

参考了下面作者的例子：也是懒加载，回显一个数据。此处是回显多个数据，删除方式不同

参考链接： https://blog.csdn.net/m0_46938695/article/details/105552996