Element-ui的级联选择器高度和内容显示错误

在使用Element-ui写项目的时候，使用到里面的一个叫Cascader 级联选择器的组件。

这个组件正常的效果是这样的：

1.x版本的级联选择器的代码如下：

<div class="block"> <span class="demonstration">hover 触发子菜单</span> <el-cascader expand-trigger="hover" :options="options" v-model="selectedOptions2" @change="handleChange"> </el-cascader> </div>

虽然1.x版本已经停止维护，但是还是需要知道一下，因为有一些教学使用的依然是1.x版本的写法。

这是2.x版本的代码：

<div class="block"> <span class="demonstration">hover 触发子菜单</span> <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader> </div>

在2.x版本中，次级菜单的展开方式已经合并到:props属性中。

在使用2.x版本的过程中，我遇到了级联选择器显示异常的情况，如图 级联选择器的高度几乎占满了整个屏幕，并且二级菜单无法正常显示。

解决办法 在全局的css配置中，添加以下样式限定el-cascader-menu的高度

.el-cascader-menu { height: 200px; }

或者

.el-cascader-panel { height: 200px; }

问题解决!