左小白的技术日常
Github
2020/02/24
Author: guoqzuo

element cascader显示异常问题

当cascader里选项比较多时,组件高度会异常,主要是 .el-cascader-menu__wrap 这个样式高度为100%,将cascader里其任意一父元素手动指定高度即可,但el-cascader-menu__wrap设置的效果最好

.el-cascader-menu__wrap {
  max-height: 300px;
  overflow: scroll;
}

但这样设置后,可能会影响全局,这个是直接挂载在body元素下的,对其他模块会有影响,怎么解决这个影响呢?

发现组件提供了一个 popper-class 属性,可以自定义浮层类名

// 用 popper-class指定一个class,比如my-container,防止污染全局样式
.my-container {
  .el-cascader-menu__wrap {
    max-height: 300px;
    overflow: scroll;
  }
}

总结:当写类似的组件时,如果需要在body里插入,需要有入口可以指定对应的自定义class,这样当多个页面需要时,不会产生样式干扰

参考: