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

超、凢脫俗 2023-05-22 22:31 12阅读 0赞

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTQyNTk1Ng_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTQyNTk1Ng_size_16_color_FFFFFF_t_70 1][]

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_qq_36410795_article_details_100894520]

[https://blog.csdn.net/Wrj6811/article/details/103230860/][https_blog.csdn.net_Wrj6811_article_details_103230860]

[https://www.jianshu.com/p/cea16a953801][https_www.jianshu.com_p_cea16a953801]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTQyNTk1Ng_size_16_color_FFFFFF_t_70]: /images/20230521/03ca4804f0234b4b88e9d03e7de7e586.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTQyNTk1Ng_size_16_color_FFFFFF_t_70 1]: /images/20230521/548ab6e9e77346269b98d8c485701fff.png
[https_blog.csdn.net_qq_36410795_article_details_100894520]: https://blog.csdn.net/qq_36410795/article/details/100894520
[https_blog.csdn.net_Wrj6811_article_details_103230860]: https://blog.csdn.net/Wrj6811/article/details/103230860/
[https_www.jianshu.com_p_cea16a953801]: https://www.jianshu.com/p/cea16a953801