Element-UI 中 el-cascader 显示问题解决

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