解決 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、屬性項目，查看文件，發現問題已經解決。

---

總結：所有的前端框架出問題，無非就是牽扯到樣式問題，可以直接在瀏覽器中調出其元素，然后看起樣式，最終采用自己的樣式將其覆蓋或者添加屬性即可。