el-select下拉框修改功能回显label值失败解决方案

el-select 下拉框回显label值失败解决方案

<!-- 下拉单选 -->
<el-form-item label="部门经理" prop="manager">
    <el-select v-model="ruleForm.manager" mutiple filterable clearable remote :remote-method="remoteMethod" :loading="userLoading" placeholder="请输入姓名或工号搜索(至少两个字符)">
        <el-option v-for="(item,index) in userList" :key="item.empId" :label="item.empName + '(' + item.empNo + ')'" :value="item.empId"></el-option>
    </el-select>
</el-form-item>
<!-- 下拉多选 -->
<el-form-item label="部门预算员" prop="budget">
    <el-select v-model="ruleForm.budget" mutiple filterable clearable remote :remote-method="remoteMethod" :loading="userLoading" placeholder="请输入姓名或工号搜索(至少两个字符)">
        <el-option v-for="(item,index) in userList" :key="item.empId" :label="item.empName + '(' + item.empNo + ')'" :value="item.empId"></el-option>
    </el-select>
</el-form-item>

回显失败原因： 下拉选项中数据太多，调用接口返回所有值会造成页面卡顿，因此设置了只有输入搜索值才调接口，所以回显时虽然返回了value值，但是由于没调接口，所以 userList 为空，匹配不到label值

解决方法如下：

data() {
    return {
        manager: {}, // 部门经理
        budget: [], // 部门预算员
        ruleForm: {
            id: undefined,
            manager: ''
            budget: []
        }
    }
}
methods: {
    // 获取列表中选中行详情信息
    detailQuery({id: this.detailId}).then(res => {
        let data = res.data.obj
        this.ruleForm.id = data.id
        this.ruleForm.manager = data.managerName // 回显label值
        this.manager = {
            managerId: data.managerId,
            managerName: data.managerName
        }
        this.budget = data.budget // 预算员数组
        this.ruleForm.budget = this.budget ? this.budget.map(item => {
            return item.name
        }) : []
    }),
    // 修改
    handleSubmit() {
        this.$refs.ruleForm.validate(valid => {
            if(valid) {
                // 修改时传给后端的值为id值
                for(let i = 0; i < this.budget.length; i++) {
                    for(let j = 0; j < this.ruleForm.budget.length; j++) {
                        if(this.budget[i].name == this.ruleForm.budget[j]) {
                            this.ruleForm.budget[j] = this.budget[i].id
                        }
                    }
                }
                let params = {
                    id: this.ruleForm.id,
                    manager: this.ruleForm.manager,
                    budget: this.ruleForm.budget.join(',')
                }
                if(this.ruleForm.manager == this.manager.managerName) {
                    params.manager = this.manager.managerId ? this.manager.managerId.toString() : ''
                }
                // 后续代码省略......
            }
        })
    }
}