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