el-cascader级联选择器动态加载编辑回显问题

使用element-ui级联选择器Cascader时遇到的问题。
由于数据量过多，在进行级联选择的时候使用的是动态加载的方式。这一情况在表单中十分常见。正常的级联选择用这一组件十分便捷，但在表单修改编辑时，发现动态加载是无法准确回显的，查阅了很多资料，都比较复杂，这里记录一下我使用的简单方法，如有问题还希望各位大神指正。
简单直接上代码：

<!--核心是设置key值-->
<el-cascader :key="resetCascader" v-model="form.orgRank" :props="orgRank" ref='orgRank'></el-cascader>

//props: {
//    userDetailData: {
//        type: Object,
//        default: null
//    }
//},
data() {
	return {
	    resetCascader: 0, //记录key值
	    //其他代码(补充lazyLoad)
	    //orgRank: {
	    //    lazy: true,
        //    async lazyLoad (node, resolve) {
        //        const { level } = node
        //        if(!node.data) {
        //            const res = await getOrgList()
        //            const nodes = Array.from(res.data).map(item=>({
        //                value:item.id,
        //                label:item.name,
        //                leaf: level >= 1
        //            }))
        //            resolve(nodes)
        //        }else{
        //            const res = await getOrgRankList(node.data.value)
        //            const nodes = Array.from(res.data).map(item=>({
        //                value:item.id,
        //                label:item.name,
        //                leaf: level >= 1
        //            }))
        //            resolve(nodes)
        //        }
        //    }
        //}
	}
}
//watch: {
//	userDetailData(newValue) {
//	    this.addAndEdit(newValue)
//	}
//},

methods: {
	addAndEdit(userData) {
	    // 通过修改 key 值，实现数据回显，将组件重新渲染
	    this.resetCascader++
	    if(userData) {
	        //this.form = {
	        //    name: userData.name,
	        //    username: userData.username,
	        //    email: userData.email,
	        //    role: userData.roles[0].id
	        //}
	        this.form.orgRank = []
	        this.form.orgRank.push(userData.orgId, userData.rank)
	    }
	},
}

相关的业务代码已经注释掉了，留下的就是解决这个问题的核心代码了。通过为组件设定key值，使组件重新渲染，监听到需要编辑数据userDetailData的变化后，将key值改变，触发懒加载lazyLoad方法，最后再将数据添加到绑定的v-model中即可。