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

最新推荐文章于 2025-02-21 14:23:43 发布

原创最新推荐文章于 2025-02-21 14:23:43 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

ant design vue 专栏收录该内容

9 篇文章

订阅专栏

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

样式：

/* 表格 */
/*.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

4643

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

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

weixin_44523517的博客

08-17

1968

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

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

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

m0_61096379的博客

07-29

5210

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

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

寬真

12-16

4908

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

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

weixin_55005618的博客

01-28

7975

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

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

12-16

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

Vue2 + ant Design 1.7.2 实现表格伸缩列

Turn_to_empty的博客

02-21

1688

近期接到一个需求，需要实现一个动态表格，并使表格的列支持拖拽伸缩。在初步调研时，发现官方文档中已有相关案例，但一上手实现后却遇到了许多 bug，导致功能无法正常使用。查阅相关博客，也是找到了对应的解决方案。谨以此文记录下本次的踩坑过程，分享解决方案与优化思路。

Vue3 使用ant design vue table组件实现自定义拖拽效果

专注于前端开发与实战技巧,记录从零到一的学习与项目经验。分享 Vue3 / JavaScript / TypeScript / Flutter /Uniapp等前端技术，以及性能优化、工程化、最佳实践。

07-07

5337

通过以上实现，我们完成了Vue3 + Ant Design Vue 自定义表格拖拽排序，支持动态行排序、固定列场景、后台排序结果生成，在实际业务中非常实用。你可以在此基础上扩展：✅ 增加“保存排序”按钮✅ 支持跨页排序✅ 拖拽动画优化👉 如果觉得有帮助，记得，方便后续快速复用！

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

子非渔

02-27

9815

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

AntDesignVue表格使用横向滚动条的时候快速向左或者向右移动横向滚动条表格表头跟表格数据不是一起滚动的

最新发布

09-27

首先，用户的问题是关于AntDesignVue表格的：当使用横向滚动条时，快速左右移动滚动条会导致表头和表格数据不同步滚动的问题。用户提供了几个引用，但这些引用似乎是从其他库（如Element Plus）中来的，我需要参考...

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

weixin_44167504的博客

05-10

6964

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

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

qq_43468165的博客

08-25

3603

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

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

weixin_30241919的博客

09-30

3220

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

vue监听页面高度，缩放后antd表格超出问题

Y_soon_start的博客

09-11

367

el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。此时 el 替换，并挂载到实例上去之后调用该钩子。此时el替换，并挂载到实例上去之后调用该钩子。此时el为真实的DOM元素。数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。写在mounted里面存在问题，查看生命周期经测试，最后改写在beforeUpdate里面ok的。问题描述：首次进入页面显示正常，缩放也正常；刷新当前页面，再次进行缩放，表格超出。

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

qq_47648083的博客

04-17

4249

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

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

你，若盛开的专栏

08-26

1673

antd-Table-可视化数据滚动

hs1219462412的博客

07-05

520

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

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

Y_soon_start的博客

08-16

1443

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

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

mkijnbgt的博客

09-08

9330

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

ant design vue table如何显示滚动条

01-09

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