项目问题记录:el-select多选问题

<el-select v-model="warehouseKeeperList" multiple clearable placeholder="请选择仓库管理员" @change="keeperChange">
    <el-option v-for="item in warehouseKeeperEnum" :key="item.id" :label="item.realName" :value="item.id">
    </el-option>
</el-select>

warehouseKeeperEnum：维护的所有仓库管理员数据

warehouseKeeperList：绑定值

下图判断已选数据是否存在，如果存在都放入新数组中，并转化为接口所需参数

public keeperChange() {
        this.formData.keeperIds = this.warehouseKeeperList.join(',');
        this.warehouseKeepers = [];
        for (let i = 0; i < this.warehouseKeeperList.length; i++) {
            this.warehouseKeeperEnum.forEach((e) => {
                if (this.warehouseKeeperList[i] == e.id) {
                    this.warehouseKeepers.push(e.realName);
                }
            });
        }
        this.formData.keeperNames = this.warehouseKeepers.join(',');
    }

问题一：编辑时多选数据未正确回显，多选框内显示id，未显示id所对应名称

解决方法：后台传参可能是字符串类型，需要转换为Int类型this.warehouseKeeperList.push(parseInt(arr[i]));

问题二：编辑时，多选框内容时有时无

解决方法：setTimeout()方法设置一个定时器

setTimeout(() => {
                if (res.keeperIds) {
                    let arr = res.keeperIds.split(',');
                    for (let i = 0; i < arr.length; i++) {
                        this.warehouseKeeperEnum.forEach((t) => {
                            if (t.id == arr[i]) {
                                this.warehouseKeeperList.push(parseInt(arr[i]));
                            }
                        });
                    }
                }
            }, 1);

 本人前端菜鸟一个，以上为个人在项目中所遇问题记录，仅供参考交流，如有好的方法望不吝赐教。