异步加载问题导致Select多选框回显的是value而不是label

151 阅读1分钟

最近开发了一个在线学习考试平台,遇到了一个问题,其中有一个模块是知识点列表,点击编辑知识点树的时候,需要在获取后端数据需要回显学科、年级名称的时候,因为年级和学科是多选框,由于一般后端是传id或者数字代替,比如用户状态用0代表启用,1代表禁用,性别用0代表男,1代表女,然后变成回显了绑定的value

image.png

这是后端传的状态

image.png

因为加载的年级学科都是动态添加修改的,所以option即多选框数据要到后端获取不能定死

导致了这样的结果,点击回显的时候回显年级本应该是一年级变成了1,学科本应该是语文变成了1,这是异步加载导致的问题

image.png

解决方案:先确保加载option选项完毕加载再回显的值,可以用async/await,这样el-select 组件才能正确显示对应的label值

image.png

结果:成功回显!

image.png