Element-UI中的Cascader 級聯選擇器高度以及位置問題

描述

使用Cascader 級聯選擇器的組件來跑項目的時候發現高度和位置存在問題

相關代碼如下：
Cate.vue中HTML結構：

<el-form :model="shopCateForm" :rules="shopCateFormRules" ref="shopCateFormRef" label-width="100px">
  <el-form-item label="分類名稱：" prop="cat_name">
      <el-input v-model="shopCateForm.cat_name"></el-input>
  </el-form-item>
  <el-form-item label="父級分類：" class='parentBox'>
      <el-cascader v-model="selectedKeys" :options="parentCateList" :props="cascaderProps" @change="parentCateChanged" style="width: 100%"></el-cascader>
  </el-form-item>
</el-form>

Cate.vue中data數據：

  // 父級分類
  parentCateList: [],
  // 選擇的父級分類
  selectedKeys: [],
  // 父級分類配置項
  cascaderProps: {
      expandTrigger: 'hover',
      label: 'cat_name',
      value: 'cat_id',
      children: 'children',
      checkStrictly: true
  }

效果如下：

如果直接在Cate.vue文件中修改下面的樣式，還是不起效果

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

原因

它可能是由js動態生成的元素標簽，然后在body標簽最后追加的一個元素，已經脫離了Cate.vue的管理。

解決辦法

在全局樣式文件global.css中設置如下配置

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