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

最新推荐文章于 2024-08-09 16:46:16 发布

A PIG

最新推荐文章于 2024-08-09 16:46:16 发布

阅读量560

点赞数 1

本文链接：https://blog.csdn.net/weixin_44426216/article/details/113746095

版权

本文探讨了el-cascader组件在实际应用中遇到的高度调整、圆圈点击操作和内容框响应问题。提供了全局CSS解决方案，并通过调整样式和事件处理来改进用户体验。还分享了在change事件中的自定义行为以隐藏下拉菜单。

摘要由CSDN通过智能技术生成

在这里插入图片描述
问题：

级联选择器的高度有问题，占据的高度太高，无法选择某些选项
不能像以前一样点击文字实现效果，而要靠点击圆圈有效
点击圆圈后内容框竟然无法自动收缩

解决办法

在全局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;
  }

当el-cascader实例发生change事件的时候，负责监听事件的函数把这个实例的dropDownVisible置为false

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