element Cascader 级联选择器更新后出现的bug解决方案

在学习黑马前端vue的时候碰到的问题

自从element-ui更新到2.12之后，级联选择器Cascader出现了几个小问题：

1.级联选择器的高度有问题，占据的高度太高，无法选择某些选项

2.不能像以前一样点击文字实现效果，而要靠点击圆圈有效

3.点击圆圈后内容框竟然无法自动收缩

 

 

解决方法：

1.在全局css里面添加部分代码（不是vue的局部css），这样能够解决第一和第二个问题

//解决高度太高的问题
.el-cascader-menu {
    height: 300px;
}
.el-cascader{
    width: 100%;
}




//解决圆圈文本问题
.el-cascader-panel .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .el-cascader-panel .el-radio__input {
    visibility: hidden;
  }
    /* 这个样式针对IE有用，不考虑IE的可以不用管*/
  .el-cascader-panel .el-cascader-node__postfix {
    top: 10px;
  }

 

2.当el-cascader实例发生change事件的时候，负责监听事件的函数把这个实例的dropDownVisible置为false（这个dropDownVisible属性element-ui官方文档是找不到的）

<template>
    <el-cascader size='medium' v-model="selectedKeys" :options="parentCataList"
        :props="CascaderProps" @change="parentCateChanged"
        clearable ref="elcascaderRefs"> </el-cascader>
</template>

<script>
export default {
    methods:{
        parentCateChanged(){
            console.log(this.selectedKeys)
            this.$refs.elcascaderRefs.dropDownVisible = false
        }
    }
}
</script>

感谢大佬的各种方案，如有兴趣可以看看大家的讨论和各种不同的实现方法：

https://blog.csdn.net/qq_36410795/article/details/100894520

https://blog.csdn.net/Wrj6811/article/details/103230860/

https://www.jianshu.com/p/cea16a953801