vue中页面铺不满的问题，以及怎样修改element-ui样式

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量2.5k 收藏 2
点赞数
文章标签： vue.js ui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48687415/article/details/121897882
版权

怎么解决vue中，html，body铺不满屏幕的问题，就是对于撑开的部分html，body没有覆盖掉，这样可以通过新建一个css文件，
在这里插入图片描述
设置html，body的宽高，然后在引入，需要的vue文件中
引入方式如下
在这里插入图片描述

在遇到想要解决element-ui中的样式问题，
1.可以写一个外链css文件，在浏览器中去查询关于它的class类名，然后根据类名去修改的自己的样式，和上面的解决方法类似
2.可以查询这个类名，以及它的父亲类名使用 .父类名 >>> .类名{}的方式也可以修改其样式，还有一种deep，但是用起来没有 >>> 好用

橘子和其他
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue+element-ui实现表格编辑的三种实现方式
10-17
主要介绍了vue+element-ui实现表格编辑的三种实现方式，主要有表格内部显示和编辑切换，通过弹出另外一个表格编辑和直接通过样式控制三种方式，感兴趣的小伙伴们可以参考一下
HTML+Element-ui邮件管理前端界面
07-12
不用脚手架，无需创建vue工程 若element-ui显示故障： 1.查看是否引用 <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <!-- 引入element 的组件库--> <script src="https://unpkg.com/element-ui/lib/index.js"></script> 2.html代码是否被div包含 3.是否 var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
vue单界面高度铺满全屏
老衲的少女心i~
01-04 2167
vue单界面高度铺满全屏
vue项目高度未占满全屏，可以给app.vue页面设置样式，来让高度撑开全屏
angrynouse的博客
09-15 3307
【代码】vue项目高度未占满全屏，可以给app.vue页面设置样式，来让高度撑开全屏。
创建vue项目，页面四周都有白边，无法铺满整个页面
m0_60967241的博客
04-27 4769
创建了vue项目，但是发现每个页面四周都有白边
element组件无法铺满整个页面
dxsxjcjc的博客
07-30 577
当我们一开始建立一个vue项目并且引入element组件时可能会遇到无法铺满整个页面的情况。
vue使用element的布局 发现没有撑满全屏
Mr_wuying的博客
04-24 1091
注意要是样式写在style里 要覆盖element的样式不可以在style上添加。这么写的话是覆盖不住element的样式的 必须把。给el-contaniner 添加一个高度。Main 没有把页面其余部门撑满。
vue+ElementPlus框架Container 布局容器不能铺满整个屏幕
enjoyenjoy576423146的博客
04-10 5036
直接使用ElementPlus框架的Container 布局容器，在页面中没有铺满，查看可知，有padding20px，高度也只有一半，因此添加了scc。
关于在组件中引入element-ui的布局时，无法填充屏幕的问题！
qq_48692433的博客
03-25 458
关于在组件中引入element-ui的布局时，无法填充屏幕的问题！在对于页面布局时，无疑引入element-ui是一个事半功倍的办法，能快速帮我们搭起网站结构，但对于第一次引入的小伙伴，会发现Container 布局容器等不能填充页面，会出现边距留白的问题，下面的方法能很好地解决这个问题。
解决element-ui布局容器高度不能充满屏幕的问题
qq_58174484的博客
01-23 1万+
解决element-ui布局容器高度不能充满屏幕问题
VUE element-ui响应式步骤进度条样式代码
06-11
几款简单的基于VUE element-ui响应式步骤进度条样式代码，active往里传值即可显示步骤。
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
10-17
主要介绍了Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
tree-transfer：一个基于vue和element-ui的树形穿梭框及邮件通讯录。一种基于Vue和element-ui的树形穿梭箱组件。 Vuecli3版本见https：github.comhql7wl-tree-transfer示例见->
02-06
不是在element-ui的穿梭框组件上的扩展，而明显参照了其外观样式和功能。 因为公司业务使用vue框架，ui库使用的element-ui。在城市表面找到一个好用的vue树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在element-...
Vue进行页面布局
Jumy_S的博客
10-08 321
【代码】Vue进行页面布局。
vue组件页面高度根据屏幕大小自适应
热门推荐
qq_39865491的博客
03-01 3万+
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 我们将document.body.clientWidth赋值给data中自定义的变量： ...
Vue+ELementUI主页布局----侧边栏布局（el-aside）
weixin_51351637的博客
10-04 3万+
第一节Login.vue登录表单知识： Element-UI+vue实现登录表单_我爱布朗熊的博客-CSDN博客具体Element-UI地址：Element - The world's most popular Vue UI framework 目录一、布满整个页面二、主页Header布局三、主页左侧带单布局四、axios请求拦截器添加token，保证拥有获取数据的权限五、发起请求获取左侧菜单数据六、左侧菜单UI绘制6.1优化一级菜单6.2当打开一个一级菜单后其他一级菜单关闭6.3实现左侧菜单的折叠与展开
Vue3使用Element-Plus + TypeScript的Container组件宽度不自动撑满
weixin_44517249的博客
03-17 952
页面宽度不撑满屏幕
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 686
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
Vue安装Element-UI样式无法正常显示
05-31
如果你安装了 Element-UI 但是样式无法正常显示，可能是由于以下原因： 1. 未引入 Element-UI 样式文件。 你需要在项目的入口文件中引入 Element-UI 的样式文件，例如在 `main.js` 中添加以下代码： ``` import 'element-ui/lib/theme-chalk/index.css' ``` 2. 使用了 scoped 样式。 如果你在 Vue 组件中使用了 `scoped` 样式，可能会导致 Element-UI 样式无法正常显示。你可以尝试在组件的样式中去掉 scoped，或者使用 `/deep/` 或者 `>>>` 选择器来覆盖 Element-UI 样式。 例如： ``` <style scoped> /* 去掉 scoped */ .element-input { color: red; } </style> ``` 或者： ``` <style scoped> /* 使用 /deep/ 或者 >>> 选择器 */ >>> .element-input { color: red; } </style> ``` 3. 引用顺序不正确。 如果你引用了多个样式文件，可能会导致 Element-UI 样式被覆盖。你需要确保 Element-UI 样式文件在其他样式文件之前引入。 4. 样式文件路径不正确。 如果你的样式文件路径不正确，也会导致 Element-UI 样式无法正常显示。你需要确认一下样式文件的路径是否正确。 如果以上方法都不能解决问题，你可以尝试重新安装 Element-UI 或者清除缓存后重试。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值