解决element-ui中 级联选择器 el-cascader 数据列表内容高度过高超出屏幕的问题 和 滚动条 el-scrollbar 底下横向滚动条样式影响美观的问题

1. 级联选择器 el-cascader 数据列表内容高度过高超出屏幕

解决element-ui中 级联选择器 el-cascader 数据列表内容高度过高超出屏幕的问题 和 滚动条 el-scrollbar 底下横向滚动条样式影响美观的问题_第1张图片

解决办法:

在全局样式中加入以下代码

/* 解决cascader级联样式表超出屏幕的问题 */
.el-cascader-panel {
    height: 210px;
}

2. 滚动条 el-scrollbar 底下横向滚动条样式影响美观

解决element-ui中 级联选择器 el-cascader 数据列表内容高度过高超出屏幕的问题 和 滚动条 el-scrollbar 底下横向滚动条样式影响美观的问题_第2张图片

解决办法:

在全局样式中加入以下代码

/* 隐藏横向滚动条 */
.el-scrollbar__wrap{
  overflow-x: hidden;
}

最终效果显示

解决element-ui中 级联选择器 el-cascader 数据列表内容高度过高超出屏幕的问题 和 滚动条 el-scrollbar 底下横向滚动条样式影响美观的问题_第3张图片

你可能感兴趣的:(element-ui,vue,vue.js,css)