当前位置:网站首页>The use of El cascader and the solution of error reporting
The use of El cascader and the solution of error reporting
2022-07-05 23:42:00 【SwJieJie】
Problem description :
scene : Some types have no data , At this time cascader Of options yes [ ], The drop-down box is empty . If you choose a type , Get cascader The data of , stay cascader Select a piece of data , Replacement type , If there is no such data, an error will be reported
This is in use element ui Medium cascader Error reports that appear
The reason is not clear for the time being , Personal understanding may be that the data source has not been updated in time , and vue It's data driven , So I added a monitor , And give cascader Bind a key, In this way, as long as the data source changes ,key Just change , Just re render
terms of settlement 1:
If there is no data, it will cascader Set to non editable
<el-cascader
:options="cascaderOption"
:props="props"
:disabled="optionsChanged"
v-model="cascaderValue"
collapse-tags
:placeholder="showPlaceholder"
/>
And directly return, Do not load drop-down nodes
getCascader() {
this.cascaderValue= []
getCascader(this.type).then(response => {
if(response.data.data.length === 0){
this.optionsChanged = true
this.showPlaceholder = ' No scope temporarily '
return
}
this.cascaderOption = response.data.data
});
}
terms of settlement 2: By binding unique key,key Just change , Just re render
<el-cascader
:key="keyValue" //keyValue stay data In the definition of , The initial value is 0
clearable
:props="propsObj"
v-model="value"
:options="options"
>
</el-cascader>
watch: {
options(newVal) {
this.keyValue++ // As long as the data source changes , change keyValue Value , To achieve the effect of re rendering
}
},
边栏推荐
- 【经典控制理论】自控实验总结
- 无刷驱动设计——浅谈MOS驱动电路
- STM32__06—单通道ADC
- UVA – 11637 garbage remembering exam (combination + possibility)
- 4点告诉你实时聊天与聊天机器人组合的优势
- Zero rhino technology joined hands with the intelligence Club: the "causal faction" forum was successfully held, and the "causal revolution" brought the next generation of trusted AI
- Code farmers to improve productivity
- poj 2762 Going from u to v or from v to u? (infer whether it is a weak link diagram)
- Rsync remote synchronization
- Why use weak pointers for delegation- Why use weak pointer for delegation?
猜你喜欢
随机推荐
GFS Distributed File System
Spreadjs 15.1 CN and spreadjs 15.1 en
[classical control theory] summary of automatic control experiment
11gR2 Database Services for &quot;Policy&quot; and &quot;Administrator&quot; Managed Databases (文件 I
【SQL】各主流数据库sql拓展语言(T-SQL 、 PL/SQL、PL/PGSQL)
[original] what is the core of programmer team management?
CIS benchmark tool Kube bench
MySQL (2) -- simple query, conditional query
俄外交部:日韩参加北约峰会影响亚洲安全稳定
Mathematical formula screenshot recognition artifact mathpix unlimited use tutorial
el-cascader的使用以及报错解决
QCombox(重写)+QCompleter(自动补全,自动加载qcombox的下拉选项,设置背景颜色)
MySQL replace primary key delete primary key add primary key
UVA – 11637 Garbage Remembering Exam (组合+可能性)
The interface of grafana tool displays an error, incluxdb error
Neural structured learning - Part 2: training with natural graphs
Spécifications techniques et lignes directrices pour la sélection des tubes TVS et ESD - Recommandation de jialichuang
Go language implementation principle -- lock implementation principle
yate.conf
UVA11294-Wedding(2-SAT)