使用了el-cascader实现级联效果控制台报错Error in render: “TypeError: Cannot read property ‘algo

记录前端开发遇到的小坑

问题描述：在使用使用了el-cascader实现级联效果，想要实现级联选择器中根据指定条件默认选中级联选项的效果。在ELement-ui可通过绑定props属性值来进行指定条件的配置选项。如下

虽然实现了效果，但是打开控制台一直提示有warning 控制台报错Error in render: “TypeError: Cannot read property ‘algorithmInfos’ of null”

找到问题之源：

因为Cascader下拉进行显示的数据是由后台接口进行提供，在进行默认值显示修改时，将后台返回的数据赋值给v-model绑定的数据，进行如此的赋值是能够实现默认值改变显示的，但是在改变绑定类型后，Cascader的options动态的进行了改变，使得Cascader的绑定数值在下拉选项中不存在。总之就是因为点击或者选中了父节点改变了榜单的类型，从而options进行动态得改变了，改变之后因为没有了这个父节点就会产生报错。当然，只要activePath 不改变就会产生报错。

解决方案：

改变榜单类型，然后options改变之后，只需要通过重新渲染Cascader组件就可以解决了。
我使用了如下的方法进行重新渲染Cascader解决的：
给Cascader设置了一个key值（注意需要在data中先初始化：isResouceShow: 0）

原理是在改变榜单类型时也顺带着改变下key值，key值改变了，Cascader就能进行重新渲染了。实现如下：

 <el-form-item label="接口选择">
        <el-cascader
          v-model="form.stringList"
          :key="isResourceShow"
          :options="allApiList"
          :props="optionProps"
          @change="handleChange"
        />
 </el-form-item>
...
data(){
 return{
	// ....
	optionProps: {
        value: 'id',
        label: 'name',
        children: 'algorithmInfos'
	},
 	isResourceShow:0,
	}
// ...
}

// ...
selectAlg().then(data => {
      ++this.isResourceShow
      console.log('5454 ' + data)
      this.allApiList = data
})
//...


复制代码

实现效果

前端路漫漫其修远兮，吾将上下而求索，一起加油，学习前端吧:stuck_out_tongue_closed_eyes:~