解决 element-ui下Cascader 数据太多显示不完全的问题

描述问题

先附上我的出问题代码

<template>
  <div>
    <div class="block">
      <span class="demonstration">hover 触发子菜单</span>
      <el-cascader
        v-model="value"
        :options="cateList2"
        :props="cateProps"
        size="mini"
        clearable
        @change="handleChange">
      </el-cascader>
    </div>
    <el-button @click="showValue">test</el-button>
  </div>
</template>
<script>
  export default {
    created () {
      this.getCateList2()
    },
    data () {
      return {
        value: [],
        cateList2: [],
        cateProps: {
          expandTrigger: 'hover',
          label: 'cat_name',
          value: 'cat_id',
          children: 'children',
          checkStrictly: true
        }
      }
    },
    methods: {
      async getCateList2 () {
        const { data: res } = await this.$http.get('categories', {
          params: { type: 2 }
        })
        if (res.meta.status !== 200) return this.$message.error('获取失败')
        this.cateList2 = res.data
      },
      showValue () {
        console.log(this.cateList2)
      },
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

在上述代码中，异步请求的数据远远超过屏幕所能容纳的量，此处给出上述cateList2打印出来的数据，其为：

总共三十组数据，在给出上述代码在我服务器执行后结果图片：
{{uploading-image-154422.png(uploading
可以明显看出此时的数据并没有罗列完全，并且cascader的高已经沾满了整个屏幕。

问题解决

1、寻找出问题的元素，调出其元素所在位置，在浏览器上直接调试：

查看元素后，发现是el-cascader-panel控制cascader的样式大小。现在问题已经解决了，只需要修改cascader样式就可以了。
2、打开自己的文件，给main.js中引入的全局样式表中添加如下样式：

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

3、属性项目，查看文件，发现问题已经解决。

---

总结：所有的前端框架出问题，无非就是牵扯到样式问题，可以直接在浏览器中调出其元素，然后看起样式，最终采用自己的样式将其覆盖或者添加属性即可。