在学习黑马前端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

Logo

前往低代码交流专区

更多推荐