1、what?
在使用Cascader 级联选择器中的el-cascader组件进行级联效果实现的时候，想要实现级联选择器中根据指定条件默认选中级联选项的效果，但是设置完默认选项之后虽然可以显示预想的效果，但是总是会报以上的错误。
2、why?
因为Cascader下拉进行显示的数据是由后台接口进行提供，在进行默认值显示修改时，将后台返回的数据赋值给v-model绑定的数据，进行如此的赋值是能够实现默认值改变显示的，但是在改变榜单类型后，Cascader的options动态的进行了改变，使得Cascader的绑定数值在下拉选项中不存在。总之就是因为点击或者选中了父节点改变了菜单的类型，从而options进行动态得改变了，改变之后因为没有了这个父节点就会产生报错。当然，只要activePath 不改变就会产生报错。
在改变菜单类型，然后options改变之后，只需要通过重新渲染Cascader组件就可以解决了。
我使用了如下的方法进行重新渲染Cascader解决的：
给Cascader设置了一个key值（注意需要在先初始化：optionsKey: 1）
具体如下：
<el-cascader
:key="optionsKey"
:options="options"
:props="optionProps"
v-model="classData"
@change="classChange"
clearable
></el-cascader>
data () {
return {
optionsKey: 1,//联级选择的key
optionsData: [],
options: [], // 菜单目录
classData: [], // 选中的菜单分类
}
}
每次请求菜单时，都key都+1 ， ++this.optionsKey
getClassData () {
this.$api.post('/statistics/getqualitytab', {}, (res) => {
if (res.status) {
++this.optionsKey
this.optionsData = res.data
if (this.titleId === 1) {
this.options = this.optionsData.filter((item) => {
return item.id !== '33'
})
} else {
this.options = this.optionsData.filter((item) => {
return item.id === '33'
})
}
} else {
this.$notify.warning({
title: '提示',
message: res.msg
})
}
})
},
