Element-UI 中 el-cascader 显示问题解决
Element-UI 中 el-cascader 显示问题解决BUG:后台返回列表数据较多，通过 Element-UI 中 el-cascader 组件渲染导致数据混乱与丢失，且出现无滚动条、子菜单空白等情况。原因分析:在 Chrome 的 Elements 中可以清楚看见在渲染级联数据缺失混乱的容器样式为 .el-cascader-menu 或 .el-cascader-panel。因缺失的数据
·
Element-UI 中 el-cascader 显示问题解决
BUG:
后台返回列表数据较多，通过 Element-UI 中 el-cascader 组件渲染导致数据混乱与丢失，且侧边出现无滚动条、子菜单空白等情况。
原因分析:
在 Chrome 的 Elements 中可以清楚看见在渲染级联数据缺失混乱的容器样式为 .el-cascader-menu 或 .el-cascader-panel。因缺失的数据属于第一层级联数据，那么可以得出是由于数据较多，没有设置样式高度问题导致的数据溢出丢失。这里尝试通过设置高度样式进行修正。
解决:
因需求通常会存在多个组件需要渲染级联数据，故在全局样式中写入设置。
经检测，以下代码任意一项在全局CSS样式设置即可解决此问题。
.el-cascader-menu {
height: 200px;
}
.el-cascader-panel {
height: 200px;
}
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)