element cascader级联选择数据回显删除混乱

1,051 阅读1分钟

image.png
一次在项目中使用cascader发现在编辑的时候删除的不是你的目标值。我明明选中的是日常-3但是我却把活动-2删除了

删除错误原因

创建时传给后端的顺序和他返回给我的顺序不同,这个cascader的删除是根据index来删除的因为v-modal的值和option列表的值的顺序不同导致表现出的删除目标不准确

image.png

可以看出源码中是根据index来进行删除操作的

解决办法

就是想办法将value的值的顺序与列表选中的顺序保持一致即可, 将表单的值利用getCheckedNodes选中的node重新赋值

this.form.tag = this.$refs.cascader.getCheckedNodes(true).map(item => item.value)