vue + elementUi 级联选择器，数据有两级，第二级显示空白

按照传智黑马的教程写的vue项目

使用elementUi级联选择器显示两级列表

 <el-cascader
            :options="parentCatlist"
            :props="cascaderProps"
            v-model="selectedKeys"
            @change="parentCatChange"
          ></el-cascader>

data

 parentCatlist: [],
      cascaderProps: {
        expandTrigger: 'hover',
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
selectedKeys: []

methods

async getParentCatList() {
      const { data: res } = await this.$axios.get('categories', { params: { type: 2 } })
      if (res.meta.status !== 200) return this.$message.error('获取父级分类的失败')
      this.parentCatlist = res.data
    },

然后显示效果就像上面图里一样，第二级是白色的
如果删掉从后台获取数据然后 this.parentCatlist = res.data 这一步
然后在parentCatlist里面写死数据的话就能正常显示

这是哪里出了问题呢？

很明显后端返回的数据格式和你写死的数据格式不同。

找到解决办法了，需要在全局样式表里添加
.el-cascader-panel{
height: 高度
}

链接

解决 element-ui下Cascader 数据太多显示不完全的问题 - 良木66 - 博客园 描述问题 先附上我的出问题代码 <template> <div> <div class="block"> <span class=&quo https://www.cnblogs.com/liangmu66/p/13537606.html

原来以为是后台返回的数据有问题，现在经过尝试又发现不是数据有问题。
把数据删掉一部分就可以正常显示了，而且我还反复删掉不同的部分数据尝试，结果都能正常显示
也就是说所有数据都正常，只要数量少就可以正常显示
这就更搞不明白是怎么回事了