Cascader组件实现多级联动选择笔记

得到多级联动选择需求，在网上找了一些实现方法，由于自己前端很菜，想着怎么简单怎么来，最终决定只用Element-UI中Cascader实现该功能。

及时使用现成组件也踩到很多坑，趁刚完成功能记录加深印象：

1、要使用Cascader必须满足他限制的格式：value、lable、children组合

2、因为从后台导拿出的数据基本上和组件所需数据结构很大可能不一致，这时需要把自己的数据形式转换成组件可用的形式。

以下连接地址为一大神详解递归转换数据形式：

https://www.jianshu.com/p/1daf7d762502

自己为重新理下思路，赘述下：

所有数据转换学习觉得都可以参考链接地址。收藏。

3、将数据应用到组件中

以上Cascader组件的实际使用场景。页面显示为各级数据的label数据，v-model中的数据为value数据。

选择后可在@change对应的方法中作具体操作

我在此方法中将value数组中最后的一个数据（id）赋值给表单对应项。

操作完成。

另，表单回显（设置默认值需要使用v-madel对应数据的完整数据，待后续完成后更新）