关于elementUI el-card 卡片标签消除内边距问题

最新推荐文章于 2024-07-30 17:18:46 发布
最新推荐文章于 2024-07-30 17:18:46 发布
阅读量788 收藏 8
点赞数 4
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45763682/article/details/138164423
版权
文章讨论了在使用ElementUI的el-card组件时，如何通过添加`:body-style`属性并使用`padding:0px!important`来消除卡片标签的内边距，但强调这可能会影响所有数据且并非最佳实践。解决方法中提到了!important的重要作用。
摘要由CSDN通过智能技术生成

关于elementUI el-card 卡片标签消除内边距问题

直接上答案 末尾+ !important

   :body-style="{ display:'flex',padding:'0px !important'}"

原先代码：

image-20240424170858020

会出现边框

image-20240424170937049

控制台查看 存在内边距

image-20240424171011614

查询资料：

image-20240424171219318

但是会影响全部数据，且不起效果

image-20240424171141877

加上 ！important

image-20240424170858020

image-20240424171301018

qq_45763682
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
Vue ElementUI el-select 图片选择效果
02-24
基于 Vue2.x，对 ElementUI el-select 做图片选择效果。项目说明可参见：https://blog.csdn.net/sinat_31213021/article/details/129195721
如何去掉element-ui的el-card自带的padding
最新发布
weixin_43589681的博客
07-30 514
最近在项目中有大量用到element-ui的卡片布局,但是它本身自带的padding就非常影响后面进行样式调整,所以我是直接写行内样式去掉padding,设置body-style就可以了.
【区分vue2和vue3下的element UI Card 卡片组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
07-12 805
在 Vue 2 中，我们通常使用 Element UI，而在 Vue 3 中，我们则使用 Element Plus 作为其官方推荐的替代品。尽管 Element UI 和 Element Plus 提供了相似的组件库，但它们在 Vue 2 和 Vue 3 的上下文中可能会有细微的差别。
element-ui的＜el-card＞卡片标签去除内边距padding
热门推荐
AI_xin99的博客
11-12 1万+
一、正常情况下没有嵌套，只有一层el-card时直接设置css样式为padding即可； 二、多层嵌套的情况下，我设置上述样式不生效，使用/deep/强制更新即可，所以尝试以下方法： <el-card style="height: 100%;margin-left: 10px" slot="reference"> <el-row :gutter="10" style="margin-bottom: 20px"> <el-col :span="6" class="mo
el-card设置内边距
qq_26905813的博客
03-25 635
el-card设置内边距。
element-el-row-el-col使用布局，修改el-card边距＜el-card :body-style=“{padding:‘10px‘}“＞card1＜/el-card＞
jieweiwujie的博客
09-19 9988
<divclass="home"style="border:1pxsolidred;margin-top:40px"> <!--gutter表示单个el-card之间的间距--> <el-row:gutter="10"> <!--span默认el-row为24用span去平分--> <el-col:span="6"> <el-card>card1&...
elementUI去掉el-card内部padding
qiuyushuofeng的专栏
04-09 4156
1.想去掉边框 2.找到element-ui.scss 3.修改el-card__header元素 .el-card__header{ padding: 0px 0px; border: none; }
ElementUI的el-card中，内部元素margin属性失效问题
m0_46143427的博客
07-09 1231
ElementUI的el-card中，内部元素margin属性失效问题
ElementUI中el-tree节点的操作的实现
10-15
在ElementUI中，`el-tree`组件用于展示树形数据，它提供了丰富的功能，包括节点的增删改查。在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。 ...
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
elementUi vue el-radio 监听选中变化的实例代码
10-16
主要介绍了elementUi vue el-radio 监听选中变化，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue el-card去除边框——记录一种询问度娘之外的方法
qq_53373885的博客
10-26 4854
element el-card设置五i按狂
Element.ui【走马灯】card模式下，实现每个item有间距不重叠
单枪匹码
09-10 6894
1、前阶段有需求，要求走马灯card模式下item不重叠，去网上找了很多没有实现的，后来决定自己写一个方法实现，见效果：间距的话可以自己根据需求调整： 2、实现思路：走马灯为我们提供了一个change方法，该方法当幻灯片切换时触发，回调参数是目前激活的幻灯片的索引，原幻灯片的索引，我们可以通过该方法获取到当前索引，now为当前item索引，old为轮播上一个item的索引。 我们通过观察上图走马灯item的结构可以发现，其实它的item标签位置是固定的， 也就是说我们在循环的时候，赋值给标签的id属性也
设置el-card间隔
cui01016的博客
11-29 522
【代码】设置el-card间隔。
正确运用.el-card__body 类， 记录 el-card 坑点
小蒟蒻的博客
03-01 1755
el-card 内 echart不显示，.el-card__body类 设置，el-card 内边距
修改el-card header padding值
Cheryl的加工厂
04-09 5805
想使header布满整个容器，发现有默认的padding值，需要修改为0， 修改style，发现未生效， <style scoped> .el-card .el-card__header { padding: 0 !important; } </style> 添加scoped情况下可以添加/deep/ <style scoped> .el-card /deep/ .el-card__header { padding: 0; } </style>.
Vue Element Plus El-Card 组件
小楼一夜听春雨，深巷明朝卖杏花
02-29 6330
El-Card是Element Plus组件库中的一个组件，用于展示卡片式的内容。它提供了丰富的配置选项，可以根据需求自定义卡片的样式和内容。可以通过CDN引入，也可以通过下载并引入本地文件的方式。4.在``标签内部，可以添加任意内容来展示在卡片中，可以是文本、图像、按钮或其他HTML元素。（3）可以为`标签添加多个属性，来配置卡片的样式和行为。（2）在需要使用El-Card的地方，使用`标签包裹卡片内容。
elementUI el-dialog 滚动条滚动到el-cascader标签显示
05-27
你可以在 el-dialog 组件中监听滚动事件，在滚动到 el-cascader 组件所在的位置时，手动触发 el-cascader 组件的 `handleClickoutside` 方法来隐藏所有子菜单。 例如： ```html <el-dialog title="Dialog Title" :visible.sync="dialogVisible" @scroll.native="handleDialogScroll" > <el-cascader ref="cascader" :options="options" :props="{ lazy: true }" ></el-cascader> </el-dialog> ``` ```javascript methods: { handleDialogScroll() { const cascaderEl = this.$refs.cascader.$el const cascaderOffsetTop = cascaderEl.offsetTop const cascaderHeight = cascaderEl.offsetHeight const scrollTop = this.$refs.dialog.$el.scrollTop const dialogHeight = this.$refs.dialog.$el.offsetHeight const scrollBottom = scrollTop + dialogHeight if ( cascaderOffsetTop >= scrollTop && cascaderOffsetTop + cascaderHeight <= scrollBottom ) { // el-cascader 组件在可视区域内，不做处理 return } // el-cascader 组件不在可视区域内，隐藏所有子菜单 const cascader = this.$refs.cascader if (cascader.isExpand) { cascader.handleClickoutside() } } } ``` 在滚动事件中，首先获取 el-cascader 组件的位置和高度信息，以及 el-dialog 组件的滚动位置和高度信息，然后根据这些信息判断 el-cascader 组件是否在当前可视区域内。如果 el-cascader 组件不在可视区域内，就手动触发 el-cascader 组件的 `handleClickoutside` 方法来隐藏所有子菜单。 需要注意的是，这里的 `handleClickoutside` 方法是 el-cascader 组件内部的一个方法，需要通过 `$refs` 获取到 el-cascader 组件的实例才能调用。同时，`isExpand` 属性是 el-cascader 组件内部用于判断子菜单是否展开的属性，需要保证 el-cascader 组件已经加载完成并且展开过子菜单才能使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值