elementUI container布局不生效解决办法

大晚上的查这个查了半个多小时,不行我一定要写博客把这个坑记录下。

<el-container direction="vertical">
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>
    </el-container>

在写项目中,用到了container布局,我代码复制的官网,应该是没有问题的,但是却没有出现预期的结果,页面显示如下图
在这里插入图片描述

然后看了下高度宽度,我把#app的高设置为100vh(充满全屏)
在这里插入图片描述

结果页面还是没变化,一直在百度搜“ElementUI container布局不生效”,说的都是这个属性
在这里插入图片描述
实在没办法从头百度,搜索“EclementUI的使用”,看到全局导入和按需导入才明白过来,如果是按需导入,container也是要手动导入的,导入如图:
在这里插入图片描述

导入之后就好了,然后随便设置一下背景色,高度,大概长这样
在这里插入图片描述

说了这么多没有几句有用的,如果你在使用elementUI中出现此问题,也希望你能检查下elementui是否导入,组件是否导入这类问题。

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值