elementUI 级联选择器el-cascader 回显中爬坑。

先上需求图，页面是三个路由公用一个页面（新建，复制与编辑）其实就是简单的接口传值与回显。

新建时拿到字段对应code

其中前三个省市区是一个接口，第四个详细区域是另一个接口。

我是封装了一个组件（里面有各种常用的element的组件，其实并没有什么卵用，很鸡肋，最好是封装一个form表单）。

页面中使用组件

组件中封装的细节

下面主要讲讲如何从双向绑定中拿到对应的code
1.首先我们在使用组件的时候时传了个params参数，其中最重要的参数是tagAttrs（俗称透传）
附上其他大佬对此属性解释的链接 https://www.cnblogs.com/cjh1996/p/12812652.html
简单来说就是直接在父组件上写子组件的属性方法通过该tagAttrs属性传给子组件。

1.prop这个东西是我自己定义的 在父组件声明通过双向绑定给子组件的名称，因为级联选择器一般返回的结果是数组，也方便我们拿，address是接收的容器，所以我也定义的address是个数组

我们项目中运用的是TS 所以和普通的vue不太一致，但原理是一样的，原生的vue直接在data里面定义就行了

2.isShow就暂且先不说，这是回显时候用到的（坑所在）
3.type是8,这更没啥说的 组件中各式各样的form零件，其中8就代表级联选择器
4.tagAttrs中placeholder就不用说了，可以通过透传的方式直接写占位符（真香）
‘default-expanded-keys’: true,
‘default-checked-keys’: true,
‘node-key’: ‘warehouseProvince’,
这三个也是回显用的属性（前两个直接复制，最后一个带key的就知道不要重复，我用的是省字段，应该是组件循环的时候子节点怕给错地方了，这地方我也不清楚，欢迎补充）
props: {
lazy: true,
lazyLoad: loadAddress
}
这一段是element级联选择器懒加载的方法属性。
不要和上面我定义的prop记混了。！important
loadAddress是懒加载请求的方法

其中通过接口拿到参数后改变参数的key值然后用resolve将数据添加到组件的节点中
resolve(node)
我的需求是俩接口所以用element方法的node中的level判断第几级来分别处理。
其中如果第三级选择的是全区域第四级就不执行了（因为全区域已经包含了第四级）
这是两个接口的数据处理方法

这样填表单的方法就完成了 拿参数的时候就从address里面拿就可以了

回显的时候（编辑的情景）

页面进入时拿到详情信息，然后往address数组里面塞

我这里查省市区接口中数据格式的字符串，详细区域查的时候是数字（后端还是坑了我一手）
所以我们也要保持一致 +‘’转字符串 number转数字

按道理来说这时候页面的组件应该已经渲染上数据信息了，然并卵都是我们想当然。

实际情况是页面只有组件没有联动的信息。

后来查阅资料加上这三个属性可以回显。就是上面说的
‘default-expanded-keys’: true,
‘default-checked-keys’: true,
‘node-key’: ‘warehouseProvince’,
到这里可以说是成功了一般，因为我本地调试是可以回显成功了，但到测试那就出不来了就提bug了

一开始是以为数据异常，省市区code码对不上所有出不来，后来发现并不是和接口的速度和页面渲染的时间有关系。

页面上渲染要比接口快，当页面组件渲染完，接口数据还没拿到，所以渲染的时候就没回显上去。
所以要重新渲染一次或者晚点让组件渲染

我加了个v-if重新渲染 具体逻辑是 只有在编辑的时候会回显，所以我们一开始定义show的状态是false if 是新建的路由就直接return true else 就是编辑页面了，在详情数据请求完成后 return true 不然就是 false