关于element中el-cascader的使用方式
element中el-cascader的使用
从后端拿到arr数据结构:
cityList: [ { id: 1, name: '北京', child: [ id: 11, name: '大兴区', child: [ id: 111, name: '亦庄' ] ] } ]
vue文件代码
<template> <el-cascader :options="cityList" :props="optionProps" v-model="selectedOptions" @change="handleChange"> </el-cascader> </template>
<script> data: { optionProps: { value: 'id', label: 'name', children: 'child' } } </script>
使用el-cascader报错解决
项目中使用到了element-ui中的cascader级联选择器,组件下拉列表是动态的,根据用户选择的类型来从后台请求数据
<el-select v-model="type" @change="getCascader" placeholder="请选择类型"> <el-option v-for="item in type" :key="item.typeValue" :label="item.typeName" :value="item.typeValue" /> </el-select> <el-cascader :options="cascaderOption" :props="props" v-model="cascaderValue" collapse-tags :placeholder="请先选择类型" />
再根据后台获取的数据,加载级联选择器
getCascader() { this.cascaderValue= [] getCascader(this.type).then(response => { this.cascaderOption = response.data.data }); }
于是就出现bug了
一、options为空的情况
场景:有的类型没有数据,这时cascader的options是[ ],下拉框是空的。
如果选择了一个类型,根据类型获取了cascader的数据,在cascader中选择了一条数据,再更换类型,没有这条数据了就会报错
[Vue warn]: Error in callback for watcher "options": "TypeError: Cannot read property 'level' of null
TypeError: Cannot read property 'level' of null
根据报错信息点进去看了一下,发现cascader有选中项的绑定值checkedValue和点击的父节点(高亮)activePath , 即便设置了this.cascaderValue= [] ,cascader中的activePath还是有值,也就是点击的父节点会被记录下来,再次加载cascader找不到就会报错。
解决:如果没有数据就将cascader设置为不可编辑
<el-cascader :options="cascaderOption" :props="props" :disabled="optionsChanged" v-model="cascaderValue" collapse-tags :placeholder="showPlaceholder" />
并且直接return,不加载下拉节点
getCascader() { this.cascaderValue= [] getCascader(this.type).then(response => { if(response.data.data.length === 0){ this.optionsChanged = true this.showPlaceholder = '暂无范围' return } this.cascaderOption = response.data.data }); }
二、编辑时给cascader赋值
场景:cascader下拉节点的数据由后台提供,编辑时的显示值依然让后台提供,将后台返回的信息直接赋值给cascaderthis.type = row.type //row为后台返回的数据。
这样赋值是可以显示的,但是改变类型后,cascader的options又动态改变,这就导致了cascader的value在下拉节点中不存在,又跟一options为空的情况报了同样的错误
[Vue warn]: Error in callback for watcher "options": "TypeError: Cannot read property 'level' of null
TypeError: Cannot read property 'level' of null
刚开始以为是后台返回的数据有问题,将后台返回的数组直接写死赋值给cascader就不会报错,只要数据写死就不会报错,动态赋值就报错。
this.type = ['1','2']
真让人摸不着头脑。
解决:叫上后台一起排查后发现将返回的options中的value从string改成了int就可以了
三、点击了父节点后改变了cascader的options
场景:后面又发现了一个bug,就是点击了父节点但是并没有选中的时候,改变了类型,options也动态改变了,改变后没有这个父节点就会报错。
当然,选中了节点同样会报错,只要有activePath 就会报错。
[Vue warn]: Error in callback for watcher "options": "TypeError: Cannot read property 'level' of null
TypeError: Cannot read property 'level' of null
解决:与一options为空的bug类似,重新渲染cascader都可以解决。
改变类型,cascader的options改变后,将cascader重新渲染。
重新渲染组件的方法有两种:
- 1、给cascader设置v-if,改变类型后,赋值options前将v-if设置为true就可以重新渲染cascader,但是这样有个缺陷就是不流畅,v-if设置为false时cascader的位置会空白,影响用户体验。
- 2、给cascader设置一个key,改变类型时也改变key值,key值改变了,cascader就会重新渲染
<el-cascader :key="isResouceShow" :options="cascaderOption" :props="props" :disabled="optionsChanged" v-model="cascaderValue" collapse-tags :placeholder="showPlaceholder" />
getCascader() { this.cascaderValue= [] ++this.isResouceShow this.showPlaceholder = '请先选择所属范围' getCascader(this.type).then(response => { if(response.data.data.length === 0){ this.optionsChanged = true this.showPlaceholder = '暂无范围' return } this.cascaderOption = response.data.data }); }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/weixin_43837268/article/details/945887
相关文章
解决Element-ui el-table合计行 show-summary 不显示的问题
有时候需要在table的底部有合计,这时候官方给的是在table里设置,show-summary就可以了但是给table加了一个固定高度的话,就不显示了,打开控制台可以看到这个合计是存在的那么需...2020-12-11vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了Element PageHeader页头的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 本文主要介绍了vue+element实现动态换肤的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-07
- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
- 这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
- 本文主要介绍了element表格行列拖拽的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-02
- 这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要介绍了Element Card 卡片的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-26
- 这篇文章主要介绍了Element-ui upload上传文件限制的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-25
- 这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-19
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
这篇文章主要介绍了Element-ui 自带的两种远程搜索(模糊查询)用法讲解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-29- 本文主要介绍了Element的穿梭框数据量大时点击全选卡顿的解决方案,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-31
- 这篇文章主要介绍了vue element后台鉴权流程分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-10
vue element table中自定义一些input的验证操作
这篇文章主要介绍了vue element table中自定义一些input的验证操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)
这篇文章主要介绍了element中TimePicker时间选择器禁用部分时间(显示禁用到分钟),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-16解决element DateTimePicker+vue弹出框只显示小时
这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-16- 这篇文章主要介绍了vue element el-transfer增加拖拽功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-16
- 本文主要介绍了Element中select多数据加载优化的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-27