解决 Element UI 组件下的 Cascader 高度过高问题

解决当我们在使用级联选择器时由于data中的 options 循环项过多时，级联选择器的高度被撑满全屏

看一下当时代码

<div class="block">
<el-cascader
  v-model="value"
   :options="options"   
   :props="{ 
       expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
        children: "children"
        }"
 @change="handleChange">
 </el-cascader>
</div>

<script>
  export default {
    data() {
      return {
        value: [],      //存储值
        options: [....]   //循环项（由于代码过多，这里就不全部复制出来了）
        }
      }，
      method:{
      handleChange(value){
      console.log(value)
     }
  }

展示一下当时我的 效果图

1.大家发现这里我的高度已经被撑满全屏了，开始我的想法跟大家一样，通过审查元素找到该元素，在该VUE组件下的私有 <style scoped lang="less"></style> 样式设置宽高，但发现没有效果

现在公布一下我当时的解决方法

解决方法一
// 在全局的公共 css 样式中设置为 .el-cascader-panel 添加高度

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

解决方法二
// 通过vue的生命周期函数手动为 .el-cascader-panel 设置高度

document.getElementsByClassName('el-cascader-panel')[0].style.height = '200px';