问题描述:Cascader 的placeholder重影问题
解决:
methods中
// 解决cascader placeholder重影
fixCascader() {
const cascader = document.querySelectorAll('.el-cascader__search-input')
for (let index = 0; index < cascader.length; index++) {
cascader[index].setAttribute('placeholder', '')
}
}
updated()中
updated() {
this.fixCascader()
},
问题描述:
场景:有的类型没有数据,这时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的值,达到重新渲染的效果
}
},