当前位置:网站首页>el-cascader的使用以及报错解决
el-cascader的使用以及报错解决
2022-07-05 23:26:00 【SwJieJie】
问题描述:
场景:有的类型没有数据,这时cascader的options是[ ],下拉框是空的。如果选择了一个类型,根据类型获取了cascader的数据,在cascader中选择了一条数据,再更换类型,没有这条数据了就会报错
这是在使用element ui中的cascader出现的报错
原因暂时不清楚,个人理解可能是因为数据源没得到及时更新,而vue是数据驱动的,所以我加了监听器,并且给cascader绑定了一个key,这样只要监听到数据源发生变化,key 就变化,就重新渲染
解决办法1:
如果没有数据就将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
});
}
解决办法2:通过绑定唯一的key,key 就变化,就重新渲染
<el-cascader
:key="keyValue" //keyValue在data中定义,初始值为0
clearable
:props="propsObj"
v-model="value"
:options="options"
>
</el-cascader>
watch: {
options(newVal) {
this.keyValue++ //只要监听到数据源发生变化 ,改变keyValue的值,达到重新渲染的效果
}
},
边栏推荐
- 3D reconstruction of point cloud
- TVS管和ESD管的技術指標和選型指南-嘉立創推薦
- 秒杀系统的设计与实现思路
- yate. conf
- 做自媒体影视短视频剪辑号,在哪儿下载素材?
- Spire.PDF for NET 8.7.2
- White hat talks about web security after reading 2
- Solution to the packaging problem of asyncsocket long connecting rod
- 俄外交部:日韩参加北约峰会影响亚洲安全稳定
- Data analysis - Thinking foreshadowing
猜你喜欢
14种神笔记方法,只需选择1招,让你的学习和工作效率提高100倍!
Development specification: interface unified return value format [resend]
TVS管和ESD管的技術指標和選型指南-嘉立創推薦
Sum of two numbers, sum of three numbers (sort + double pointer)
Object detection based on impulse neural network
Go language introduction detailed tutorial (I): go language in the era
Rasa 3. X learning series -rasa 3.2.1 new release
保研笔记四 软件工程与计算卷二(8-12章)
开源crm客户关系统管理系统源码,免费分享
Go语言实现原理——锁实现原理
随机推荐
TVS管 与 稳压二极管参数对比
TVS管和ESD管的技術指標和選型指南-嘉立創推薦
Comparison of parameters between TVs tube and zener diode
Neural structured learning 4 antagonistic learning for image classification
Data analysis - Thinking foreshadowing
The PNG image is normal when LabVIEW is opened, and the full black image is obtained when Photoshop is opened
Huawei simulator ENSP - hcip - MPLS experiment
(4)UART应用设计及仿真验证2 —— TX模块设计(无状态机)
How to design API return code (error code)?
Attacking technology Er - Automation
In C#, why can't I modify the member of a value type instance in a foreach loop?
20.移植Freetype字体库
2022.6.20-6.26 AI industry weekly (issue 103): new little life
[Yu Yue education] NC machining technology reference materials of Shaanxi University of science and technology
Latex multiple linebreaks
Rasa 3. X learning series -rasa x Community Edition (Free Edition) changes
There are 14 God note taking methods. Just choose one move to improve your learning and work efficiency by 100 times!
Judge whether the binary tree is a complete binary tree
2: Chapter 1: understanding JVM specification 1: introduction to JVM;
保研笔记二 软件工程与计算卷二(13-16章)