【ant design vue】表格超过高度时显示滚动条

最新推荐文章于 2024-11-24 15:55:49 发布

谭CV

最新推荐文章于 2024-11-24 15:55:49 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ant design vue

本文链接：https://blog.youkuaiyun.com/THcoding_Cat/article/details/115615241

ant design vue 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何使用 CSS 对 Ant Design 的表格组件 `.ant-table` 进行样式定制，特别是设置 `overflow-y: auto!important;` 实现 Y 轴滚动效果。示例代码展示了在 HTML 中应用这些样式到 `<a-table>` 元素上，设置了滚动高度为 550 像素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样式：

/* 表格 */
/*.table 为全局表格自定义样式*/
.table .ant-table-body,.table .ant-table-header{
    overflow-y: auto !important;
}

html代码：

<a-table class="table" :scroll="{ y: 550 }"></a-table>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

谭CV

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

antd组件库中table组件内容自适应屏幕最大高度设置滚动条

前端三脚猫的博客

03-12

4252

在平时项目开发中，使用antd组件库得table组件展示数据，但是由于一页展示的数据太多表格整体高度超出屏幕最大高度，导致整体屏幕出现滚动条，在滚动查看数据的时候表格头部也会随之进行向上滚动体验非常不友好，所以就需要当表格高度超出屏幕高度时根据屏幕的最大高度设置表格内部滚动条。

美化ant-design vue 组件滚动条样式，hover时滚动条样式变化

子非渔

02-27

9781

a-modal： .ant-modal-body { &::-webkit-scrollbar { width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } &::-webkit-scrollbar-thumb { border-radius: 6px; // -webkit-...

1 条评论您还未登录，请先登录后发表或查看评论

vue项目当超出一定的高度或者宽度时显示滚动条

m0_61096379的博客

07-29

5149

当超出高度或者宽度时显示滚动条.

antd 设置表格数据超过多少条展示滚动条

寬真

12-16

4856

antd 设置表格数据超过8条展示滚动条，要滚动条需要制定表格的高度，用逻辑与修饰符可以实现，不用再判断没有8条的时候y的情况。 <Table size="small" loading={tableLoading} scroll={{ x: tColumn.reduce(...

【ant design vue的table设置scroll后出现滚动条的隐藏处理】

weixin_55005618的博客

01-28

7752

【代码】【ant design vue的table设置scroll后出现滚动条的隐藏处理】

vue页面超出显示滚动条滑动展示

weixin_44167504的博客

05-10

6902

vue页面超出显示滚动条滑动展示 .analysis { width: 100%; height: calc(100%); overflow-y:scroll; overflow-x:hidden; }

vue项目中处理表格过长超出屏幕宽度有滚动问题

qq_43468165的博客

08-25

3563

项目使用了ant design vue ,在使用到表格时候出现表格内容过长问题，由于嵌套表格的容器使用card并没有给他固定宽度。所以要做一下监听解决表格过长但表格没有滚动而是屏幕滚动问题解决代码 //html控制宽度部分写上 :style="'width:' + (fullWidth - 200) + 'px'" //js监听位置，注意钩子函数的使用，要mounted才有效。 mounted() { //监听屏幕宽度 const that = this; windo.

ant design vue 锚点使用 Anchor 踩坑记录.pdf

12-16

总之，在使用Ant Design Vue的`Anchor`组件时，理解其工作原理，注意与页面布局和滚动机制的配合，以及正确设置锚点和内容ID，是避免踩坑的关键。同时，充分利用组件提供的各种属性和方法，可以进一步优化和定制锚点...

Ant Design Vue Table平滑滚动+触底实现懒加载More数据+鼠标悬停暂停实现方案

qq_33693344的博客

11-24

451

【代码】Ant Design Vue Table平滑滚动+触底实现懒加载More数据+鼠标悬停暂停实现方案。

Python私教张大鹏 Vue3整合AntDesignVue之Steps 步骤条

源滚滚编程

06-11

1505

引导用户按照流程完成任务的导航条。何时使用当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。案例：步骤条组件核心代码： <template> <a-steps :current="1" :items="[ { title: 'Finished', description, }, { title: 'In Progress', description

ant design vue table如何显示滚动条

最新发布

01-09

### Ant Design Vue 表格组件实现滚动条显示为了实现在 `Ant Design Vue` 的表格组件中当鼠标悬停时显示滚动条的效果，可以通过自定义 CSS 来控制滚动条的行为。具体来说，通过设置默认状态下滚动条不可见，并仅在...

一种table超出高度自动出滚动条的解决方案

weixin_30241919的博客

09-30

3199

在日常的开发过程中，我们可能会遇到这样一种需求，在指定高度内显示table,超过高度时表格出滚动条。让我们带着这个问题，一起来探讨吧！ 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> 3 <head> 4 <titl...

ant-design-vue 的通过控制a-table的滚动条实现表格滚动效果

qq_47648083的博客

04-17

4049

鼠标移入滚动条停止滚动，鼠标移出滚动条继续滚动。

Vue当内容超过窗口高度时，可以使用滚轮来查看内容

weixin_44523517的博客

08-17

1884

Vue当内容超过窗口高度时，可以使用滚轮来查看内容

antd的Table滚动时设置最大高度滚动范围

你，若盛开的专栏

08-26

1646

antd-Table-可视化数据滚动

hs1219462412的博客

07-05

492

【代码】antd-Table-可视化数据滚动。

antd table表格设置scroll属性头部出现多余滚动条

Y_soon_start的博客

08-16

1362

【代码】antd table表格设置scroll属性头部出现多余滚动条。

如何让Ant ＜a-table＞的高度自适应屏幕的高度/（table内容滚动条)

mkijnbgt的博客

09-08

9032

如果是插件自带的标签样式，就找到指定的标签样式进行定义在标签找对的情况下如果不生效是没有附加上样式，需要加一个.....

a-table设置滚动条以及数据内容过多省略号显示鼠标悬浮显示全部内容

weixin_48907405的博客

04-20

5177

加上滚动条后，数据过长就会导致行高撑开那么在样式里面添加以下几项。