vue el-cascader级联选择器-地区三级选择问题记录

1.表单编辑回显问题处理-添加leaf叶子节点

 <el-form-item label="所在地区" prop="addressCode" required><el-cascader ref="cascader" v-model="form.addressCode" :props="props" @change="addressChange" :change-on-select="true"></el-cascader></el-form-item>

 props: {label: 'name',value: 'id',lazy: true,checkStrictly: false,lazyLoad(node, resolve) {const stopLevel = 4// 当达到或超过停止层级时直接返回空if (node.level >= stopLevel - 1) {return resolve([])}listRegion({pageSize: 1000,parentId: node && node.data ? node.data.id : '000000'}).then(res => {const nodes = res.rows.map(item => ({...item,// 动态设置叶子节点状态（当前层级==停止层级-1时）leaf: node.level === stopLevel - 2}))resolve(nodes)})}},

2. 表单重复使用，lazyLoad第二次不调用

 <el-form-item label="所在地区" prop="addressCode" required><el-cascader ref="cascader" v-if="isRender" v-model="form.addressCode" :props="props" @change="addressChange" :change-on-select="true"></el-cascader></el-form-item>

添加【isRender】，在表单reset（）方法里挂载和销毁

  this.isRender = falsethis.$nextTick(()=>{this.isRender = true})