Element Plus: el-card的内容滚动问题

最新推荐文章于 2025-09-21 17:43:31 发布
原创 最新推荐文章于 2025-09-21 17:43:31 发布 · 484 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #Element Plus

问题

由于el-card的body div默认没有设置的height，因此它里面的内容高度超出后不能滚动。如下图所示：

方案

通过body-style（也可以使用body-class）设置height。如下图所示：

Vue项目中使用element-plus的el-table组件-组件使用-样式修改
JackieDYH的博客
09-18 1427
Vue项目中使用element-plus的el-table组件-组件使用-样式修改。
element-ui element-plus合并行、el-table 行合并，可以指定要合并行的列名称
web15085599741的博客
03-03 824
效果图 这里只设置合并了前三列，可以通过参数自己定义 1.使用 导入js文件，并设置需要合并的列 //导入js文件(文件脚本内容在下文) import {getRowspanMethod} from '@/hook/el-tables/use-span-method.js' //调用函数并导出需要的合并列函数 注意需要根据 //data为查询到的数据 //['prop1', 'prop2', 'prop3'] 需要合并的列 const spanMethod=getRowspanMethod(data,[
Vue + Element Plus 的 Card组件显示滚动条
最新发布
申无轩的博客
09-21 1039
本文介绍了Element UI中card组件的使用方法，重点解决当card组件采用flex布局填充剩余空间时无法显示滚动条的问题。通过设置父组件为flex布局，card组件使用flex-1填充剩余空间，并配合:deep穿透子组件样式设置，最终实现header固定、footer固定、中间内容区域自动滚动的效果。文章提供了完整的代码示例和效果图，并指出类似方法在el-table组件上可能存在的问题仍需进一步验证。
el-card 添加滚动条
weixin_55562256的博客
10-22 2763
在当前内容的标签上添加以下css样式。可以通过设置css实现。
el-card中表单滚动
u014642921的博客
06-30 301
【代码】el-card中表单滚动。
el-card嵌套el-tabs内容超出显示滚动条
请叫我欧皇！的博客
05-15 3193
需求如下图，el-tabs的内容如果el-card文本框的内容后显示滚动条，并且滚动条内容是完整的大屏下el-card如图在屏幕缩小的时候el-card也会跟着变小，这时内容超出了，显示滚动条。
el-card设置滚轮(scrollbar)的位置
CY2333333的博客
09-25 1万+
如何实现动态自定义设置el-card的滚轮位置   首先，我们要将el-card的滚动显示溢出内容的功能开启，具体做法： <template> <el-card class="card"> <div> <!-- your content --> </div> </el-card> </template> <style scope> .card{ overflow
Element Card 卡片的具体使用
10-15
Element Card 的基础用法通常包含一个标题（header）和内容区域。标题部分可以自定义，可以通过 `slot="header"` 来设置。例如： ```html <el-card class="box-card"> 卡片名称 <el-button style="float: ...
element-plus的文件上传组件el-upload
lucky_ly的博客
07-07 2140
el-upload 用法
优雅地给element-ui和element-plus的el-tree控件添加结构线
cn_zgt_boss的博客
10-30 1万+
优雅地给element-ui和element-plus的el-tree控件添加结构线 看 element-ui issues 有不少人提到 el-tree 结构线的需求，官方依然没有支持，我也有这个需求，有搜索到一些直接覆盖 el-tree 的 css 做法，在节点缩进、点击行效果、拖拽等方面没有很贴合的效果，并不是我想要的 于是我写了element-tree-line这个组件，作为el-tree子组件的方式，无侵入性，可插拔，很优雅的添加结构线。 原理是利用el-tree的slot，添加对应节点的n个s
ElementUI的el-card中，内部元素margin属性失效问题
m0_46143427的博客
07-09 1415
ElementUI的el-card中，内部元素margin属性失效问题
Vue2CSwipeMobile一个简单的Vue2x移动端卡片滑动组件
08-12
Vue2-C-Swipe Mobile 一个简单的移动端卡片滑动组件，适用于Vue2.x
Vue Element Plus El-Card 组件
热门推荐
小楼一夜听春雨，深巷明朝卖杏花
02-29 1万+
El-Card是Element Plus组件库中的一个组件，用于展示卡片式的内容。它提供了丰富的配置选项，可以根据需求自定义卡片的样式和内容。可以通过CDN引入，也可以通过下载并引入本地文件的方式。4.在``标签内部，可以添加任意内容来展示在卡片中，可以是文本、图像、按钮或其他HTML元素。（3）可以为`标签添加多个属性，来配置卡片的样式和行为。（2）在需要使用El-Card的地方，使用`标签包裹卡片内容。
Vue ElementPlus el-card、el-input 登入页面
小楼一夜听春雨，深巷明朝卖杏花
03-18 4029
要开发新页面第一步要先去定义路由，定义好路由之后创建好对应的视图文件，然后就可以基于这个pass去访问这个页面了，拿到这个文件的效果了。然后就可以在这个文件里面边开发边去看效果去调试。先去注册路由，注册好路由之后去找到对应的xx.vue，再去vue文件里面写css和js。一个页面进来，是先到index.html。然后再到App.vue，App.vue里面有路由占位符，会将pass下面对应的视图文件加载进来到route-view的位置。卡片包含标题，内容及操作区域。卡片组件由header和。
滚动条（有效）
m0_50664127的博客
06-07 2791
滚动条显示
el-scrollbar 设置侧栏显示滚动条
qq_57528681的博客
11-04 949
el-scrollbar 设置侧栏显示滚动条
elementplus的el-card组件左上角添加标题
weixin_45816407的博客
04-08 1716
在这个例子中，<template #header> 是 el-card 的命名插槽，用于替换卡片头部的内容。你可以在其中放置任何 Vue 模板内容，这里放置了一个。要在 Element Plus 的 el-card 组件左上角添加标题，可以利用 el-card 提供的 header 插槽来进行自定义。这样就在卡片左上角添加了一个标题及一个图标。如果你还需要更多的结构化控制，比如添加图标或其他元素，可以进一步扩展这个模板内容。标签作为标题，并通过 CSS 对其样式进行调整。
【VUE3】ElementUI--el-card卡片列表、el-tree 结合多选框获取子节点id导出数据
qq_48468636的博客
04-23 7924
在父级选中后我们不需要父级的id，只要求子级已选中的id，当子级全部勾选后父级也执行勾选，此时也要把父级id去掉。1.通过 npm、yarn、pnpm 安装。这次比较简单直接，贴上代码就可以了！首先要在项目文件安装具体可以查看。
踩坑:Element-UI中el-card里的:body-style
peijian0317的博客
10-29 3583
4.得出结论display:flex必须写在element-ui所规定的body-style里而且body-style前要加:因为里面如果不加的话他就不是js解析式里面的东西会被当成字符串看待,只有加上:里面才会被当成js解析式。初学Vue练习写项目时发现有些css样式只能放body-style里,这是由于 CSS 的特殊性和优先级规则导致的。1.body-style的默认样式是自带padding:20px,常用于el-card中。2.我想实现如图红色框的左右布局最好的方法就是用display:flex。
element-plus 中的el-card 定位超出会消失
07-25
在element-plus中，el-card组件的定位超出会消失的问题可能是由于CSS样式的问题导致的。根据提供的代码，el-card组件的样式是通过添加类名来实现的。在代码中，如果shadow属性的值不是'always'、'hover'或'never'，则会添加一个类名为'is-' + shadow + '-shadow'的类，用于控制阴影效果。如果shadow属性的值不在这三个选项之间，可能会导致样式出现问题，从而导致定位超出时消失的情况。 为了解决这个问题，你可以检查shadow属性的值是否正确设置为'always'、'hover'或'never'之一。如果不是，你可以尝试修改shadow属性的值，或者添加相应的CSS样式来修复定位超出时消失的问题。 另外，你还可以检查el-card组件的父元素是否设置了合适的定位属性，例如position属性。如果父元素的定位属性不正确，也可能导致el-card组件的定位超出时消失。 总结起来，要解决element-plus中el-card组件定位超出消失的问题，你可以检查以下几点： 1. 检查shadow属性的值是否正确设置为'always'、'hover'或'never'之一。 2. 检查el-card组件的父元素是否设置了合适的定位属性。 希望以上信息对你有帮助！\[1\] #### 引用[.reference_title] - *1* [element-ui element-plus card - 分析](https://blog.youkuaiyun.com/qq_33221861/article/details/110946080)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值