el-cascader的使用以及报错解决

问题描述：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的值，达到重新渲染的效果
  }
},