element ui中级联选择器不能滚动，全部显示的问题

今天做项目时发现element ui中的级联选择器不能滚动显示，而是占满整个屏幕，并且最上面的几条数据看不见

解决方法 

在css全局样式里添加

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

注意：不能在.el-casader中添加，没有效果

修改之后的样式

补充：级联选择器的用法

<template>
  <el-cascader
    v-model="selectedCateKeys"
    :options="catelist"
    :props="cateProps"
    @change="handleChange">
  </el-cascader>
</template>
<script>
export default {
    data () {
        return {
            // 商品分类列表
            catelist: [],
            // 级联选择框的配置对象
            cateProps: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
                expandTrigger: 'hover'
            },
            // 级联选择框双向绑定到的数组
            selectedCateKeys: []
        }
    },
    methods: {
		// 级联选择框选中变化，会触发这个函数
        handleChange() {
            console.log(this.selectedCateKeys);
        }
    }
}
</script>

常用属性值
options: 指定数据源，在data中应有对应的数组catelist；
props: 配置选项对象,在data中应有对应的对象cateProps;
v-model:将选中的id的值双向绑定到对应的数组中selectedCateKeys;
change:绑定了选择项改变事件，选择项改变时触发;

props中常见属性
value: 与v-model中的双向绑定挂钩，这里如果绑定了cat_id那么v-model中绑定的就是id指，value就是选中的分类的代名词;
label: 绑定看到的分类名字cat_name
children: 绑定所用的嵌套children
expandTrigger: 绑定触发的模式是点击还是触摸hover