element-ui 级联选择器el-cascader踩坑

1.el-cascader 组件选中 — X图标清空 — 点击选择器，然后会发现下拉框中清空之前的数据选中还在高亮。当级联选择器内容需要动态变化时，会爆出Cannot read property ‘level’ of null错误（如果没有选择就不会报错的）。

解决：给组件添加key，数据改变时改变key值，刷新组件即可。

<el-cascader :key="keyNum" v-model="system" :options="list" :props="propObj" filterable clearable @change="updateKey"></el-cascader>

……

keyNum: 0,
system: '',
list: [{aa:xxx,bb:xxx,data:[aa:zzz,bb:mmm]},{aa:yyy,bb:yyy,data:[aa:ddd,bb:hhh]},...],
// 接口返回数据格式
propObj: {value: 'aa', label: 'bb', children: 'data'},
……

updateKey(){
 this.keyNum = new Date().getTime();
}

2.下拉选项共两级菜单，两级选总数据量大概在1K左右，接口大概一百多毫秒返回数据。进入页面时会出现数据回显慢的问题，大概是进入页面要等1-2秒的样子才能回显选中数据，接口返回数据大格式 list: [{aa:xxx,bb:xxx,data:[aa:zzz,bb:mmm]},{aa:yyy,bb:yyy,data:[aa:ddd,bb:hhh]},...]

解决：想办法先初始化默认选中的数据。先将拿到的数据翻译过来，因为第两级数据的值是'',很容易就先静态写入一条默认选中数据 list: [{aa:xxx,bb:xxx,data:[aa:'*',bb:'']}]，等接口返回拿到数据后，再替换掉 list 里面数据，瞬间解决了回显慢的问题；