关于Cascader组件编辑回显问题(elementUI踩坑)

最近着手的项目有一个地区级联选择的需求,在Cascader中点击动态加载省份,点击省份后动态加载对应城市。这部分描述以及使用方法请参照element官方级联选择器。不过在数据编辑时回显上出了问题。现已解决,描述如下。

问题

  1. 在列表数据为空时添加数据成功(此时并未刷新页面)。
  2. 在不刷新页面情况下进行编辑,此时回显正常。
  3. 刷新页面后进行某一条数据的编辑,这条数据回显正常。
  4. 再编辑其他数据,回显失效。

总结:如果当前数据是刚刚进行操作过的数据,回显正常,刷新页面后,也只有进行编辑操作的第一条数据可以回显。

解决

在编辑函数中清空Cascader的绑定数据(一般为数组)后,将Cascader组件删除掉(v-if),再利用定时器重新载入Cascader组件。此时再进行组件绑定数据的回显操作正常。

注:为视觉效果,定时器时间最好为0。



this.isShow = false;
// 定时器重新载入组件就可以触发组件拉取数据
setTimeout(() => {
  this.isShow = true;
}, 0);

 

你可能感兴趣的:(vue.js,前端)