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

Ant Design Table 自定义滚动条样式
最新推荐文章于 2025-02-21 14:23:43 发布
原创 最新推荐文章于 2025-02-21 14:23:43 发布 · 3.1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这篇博客介绍了如何使用 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>

 

ant design vue 锚点使用 Anchor 踩坑记录.pdf
12-16
总之，在使用Ant Design Vue的`Anchor`组件时，理解其工作原理，注意与页面布局和滚动机制的配合，以及正确设置锚点和内容ID，是避免踩坑的关键。同时，充分利用组件提供的各种属性和方法，可以进一步优化和定制锚点...
Vue3 使用ant design vue table组件实现自定义拖拽效果
专注于前端开发与实战技巧,记录从零到一的学习与项目经验。分享 Vue3 / JavaScript / TypeScript / Flutter /Uniapp等前端技术，以及 性能优化、工程化、最佳实践。
07-07 5351
通过以上实现，我们完成了Vue3 + Ant Design Vue 自定义表格拖拽排序，支持动态行排序、固定列场景、后台排序结果生成，在实际业务中非常实用。你可以在此基础上扩展：✅ 增加“保存排序”按钮✅ 支持跨页排序✅ 拖拽动画优化👉 如果觉得有帮助，记得，方便后续快速复用！
antd组件库中table组件内容自适应屏幕最大高度设置滚动条
前端三脚猫的博客
03-12 4651
在平时项目开发中，使用antd组件库得table组件展示数据，但是由于一页展示的数据太多表格整体高度超出屏幕最大高度，导致整体屏幕出现滚动条，在滚动查看数据的时候表格头部也会随之进行向上滚动体验非常不友好，所以就需要当表格高度超出屏幕高度时根据屏幕的最大高度设置表格内部滚动条。
vue项目 当超出一定的高度或者宽度时显示滚动条
m0_61096379的博客
07-29 5210
当超出高度或者宽度时显示滚动条.
antd 设置表格数据超过多少条展示滚动条
寬真
12-16 4910
antd 设置表格数据超过8条展示滚动条，要滚动条需要制定表格的高度，用逻辑与修饰符可以实现，不用再判断没有8条的时候y的情况。 <Table size="small" loading={tableLoading} scroll={{ x: tColumn.reduce(...
【ant design vue的table设置scroll后出现滚动条的隐藏处理】
weixin_55005618的博客
01-28 7981
【代码】【ant design vue的table设置scroll后出现滚动条的隐藏处理】
vue页面超出显示滚动条滑动展示
weixin_44167504的博客
05-10 6965
vue页面超出显示滚动条滑动展示 .analysis { width: 100%; height: calc(100%); overflow-y:scroll; overflow-x:hidden; }
Vue2 + ant Design 1.7.2 实现表格伸缩列
Turn_to_empty的博客
02-21 1689
近期接到一个需求，需要实现一个动态表格，并使表格的列支持拖拽伸缩。在初步调研时，发现官方文档中已有相关案例，但一上手实现后却遇到了许多 bug，导致功能无法正常使用。查阅相关博客，也是找到了对应的解决方案。谨以此文记录下本次的踩坑过程，分享解决方案与优化思路。
美化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项目中处理表格过长超出屏幕宽度有滚动问题
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 368
el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。此时 el 替换，并挂载到实例上去之后调用该钩子。此时el替换，并挂载到实例上去之后调用该钩子。此时el为真实的DOM元素。数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。写在mounted里面存在问题，查看生命周期经测试，最后改写在beforeUpdate里面ok的。问题描述：首次进入页面显示正常，缩放也正常；刷新当前页面，再次进行缩放，表格超出。
ant-design-vue 的通过控制a-table的滚动条实现表格滚动效果
qq_47648083的博客
04-17 4257
鼠标移入滚动条停止滚动，鼠标移出滚动条继续滚动。
Vue当内容超过窗口高度时，可以使用滚轮来查看内容
weixin_44523517的博客
08-17 1968
Vue当内容超过窗口高度时，可以使用滚轮来查看内容
antd的Table滚动时设置最大高度滚动范围
你，若盛开的专栏
08-26 1673
<Table dataSource={xxx} columns={columns} scroll={{ x: 1039, maxY: 655 }} // maxY最大高度 />
antd-Table-可视化数据滚动
hs1219462412的博客
07-05 523
【代码】antd-Table-可视化数据滚动。
antd table表格设置scroll属性头部出现多余滚动条
Y_soon_start的博客
08-16 1447
【代码】antd table表格设置scroll属性头部出现多余滚动条。
如何让Ant ＜a-table＞的高度自适应屏幕的高度/（table内容滚动条)
mkijnbgt的博客
09-08 9332
如果是插件自带的标签样式，就找到指定的标签样式 进行定义 在标签找对的情况下如果不生效是没有附加上样式，需要加一个.....
ant design vue table如何显示滚动条
01-09
### Ant Design Vue 表格组件实现滚动条显示 为了实现在 `Ant Design Vue` 的表格组件中当鼠标悬停时显示滚动条的效果，可以通过自定义 CSS 来控制滚动条的行为。具体来说，通过设置默认状态下滚动条不可见，并仅在 `.ant-table:hover` 事件触发时改变其样式使其可见。 #### 自定义CSS样式 下面展示了用于隐藏和显示滚动条的具体 CSS 样式： ```css /* 默认情况下隐藏滚动条 */ .ant-table .ant-table-content .ant-table-fixed-right .ant-table-body-outer .ant-table-body-inner::-webkit-scrollbar { display: none; } /* 当鼠标悬浮于表格上时显示滚动条 */ .ant-table:hover .ant-table-content .ant-table-fixed-right .ant-table-body-outer .ant-table-body-inner::-webkit-scrollbar-thumb { background-color: #999; /* 设置滚动条颜色 */ } ``` 此段代码利用了伪类 `:hover` 和浏览器特定的选择器 `-webkit-scrollbar` 及其子部分来调整滚动条的外观[^2]。 对于非 Webkit 浏览器（如 Firefox），可能还需要额外添加兼容性的样式规则以确保跨平台的一致性体验。 另外需要注意的是，上述样式的适用范围是基于 Ant Design Vue 中的 class 名称编写的，如果框架版本更新导致这些 class 发生变化，则需相应修改选择器路径。 #### 完整示例代码 这里给出一段完整的 HTML 结构以及对应的 JavaScript 初始化逻辑作为参考： ```html <template> <a-table :columns="columns" :dataSource="data"> </a-table> </template> <script> export default { data() { return { columns: [ // 列配置... ], data: [ // 数据源... ] }; }, }; </script> <style scoped> @import '~ant-design-vue/dist/antd.css'; /* 添加之前提到的滚动条样式 */ </style> ``` 以上就是关于如何在 Ant Design Vue 的表格组件内实现滚动条随鼠标的进入而显现的方法介绍。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值