最近着手的项目有一个地区级联选择的需求,在Cascader中点击选择框动态加载省份,点击省份后动态加载对应城市。这部分描述以及使用方法请参照element官方级联选择器。不过在数据编辑时回显上出了问题。现已解决,描述如下。
问题
- 在列表数据为空时添加数据成功(此时并未刷新页面)。
- 在不刷新页面情况下对列表数据进行编辑,此时弹框中地区回显正常。
- 刷新页面后进行某一条数据的编辑,这条数据地区回显正常。
- 再编辑其他数据,回显失效。
总结:如果当前操作的数据是刚刚进行操作过的数据,地区回显正常,刷新页面后,只有进行编辑操作的第一条数据可以回显地区。
解决
在编辑函数中清空Cascader的绑定数据(一般为数组)后,将Cascader组件删除掉(v-if),再利用定时器重新载入Cascader组件。此时再进行组件绑定数据的回显操作正常。
注:为视觉效果,定时器时间最好为0。
<el-cascader v-if="isShow" v-model="value" :props="props" @change="provinceChange"></el-cascader>
this.isShow = false;
// 定时器重新载入组件就可以触发组件拉取数据
setTimeout(() => {
this.isShow = true;
}, 0);
// 或者利用nextTick
this.isShow = false;
this.$nextTick(() => {
this.isShow = true;
})
// 重点在于 组件重载就可以了