描述問題

先附上我的出問題程式碼

<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、屬性專案，檢視檔案，發現問題已經解決。

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