ant-design Table组件header部分样式被遮住问题

最新推荐文章于 2023-10-08 14:40:14 发布
最新推荐文章于 2023-10-08 14:40:14 发布
阅读量1.7k 收藏
点赞数
分类专栏： ant-design react.js 文章标签： react css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenlincc/article/details/105712113
版权

在某些场景，Table组件使用Y轴滚动后，会出现表头被表体遮住，如底部border被遮盖

解决 :

	.ant-table-header{
		margin-bottom:-5px !important; //根据实际调整
		padding-bottom:0px !important;
}
CAICANY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant design of vue ＜a-table＞表格行可编辑日期组件被遮挡
annie_1314的博客
07-09 1933
问题 选择日期，控件被遮挡
antd表格固定列遮挡
Thelittlewhale的博客
09-13 3474
需求：在原本表格基础上设置左右列为固定列。 现有情况：个别表格不带勾选框，个别表格带勾选框。 问题描述：前者直接给列加上fixed即可，后者加上fixed会出现可移动列被左侧固定列遮挡部分的情况。 给表格设置固定列后，实际上就从一个表变为了多个表。原始的表格为一个表，含有最初的所有列，左侧固定列为一个表，右侧固定列为一个表。检查元素发现，原始表格勾选框的宽度较左侧固定列表中的勾选框宽度更短，导致移动列向前缩进被左侧固定列在上方遮挡。 查阅官方文档，找到选择功能的配置rowSelection，其中自定义列.
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
蚂蚁设计可拖动模态 Ant Design的模态，可拖动。 :globe_showing_Americas: :sparkles: 特征 用标题栏拖动。 调整大小与句柄。 保持界限。 在拖动过程中。 调整大小期间。 在调整窗口大小期间。 具有托管zIndex多个模态。 从中心打开。 用作受控组件的更好的API。 从象限打开。 更好的转义密钥管理。 使用选项键调整大小。 :package: 安装 yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' import { DraggableModal , DraggableModalProvider } from
ant-design-dark-theme:Ant Ant Design的深色主题变量
05-07
:new_moon_face: 蚂蚁设计黑暗主题 :new_moon_face: Ant Design的深色主题。 仍处于实验阶段，欢迎尝试并帮助我们进行改进。 访问进行预览。 安装 $ npm install @ant-design/dark-theme 用法 import darkTheme from '@ant-design/dark-theme' ; // webpack.config.js: less-loader { loader : 'less-loader' , options : { modifyVars : darkTheme , } , } , 在Ant Design Pro中使用： :
ant-design-vue(可拖拽table).vue
03-04
ant-design-vue(可拖拽table).vue
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant-design-vue-table：蚂蚁设计-vue表
02-14
我的项目 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。
antd tabe表头出现遮挡
徐同保的专栏
08-28 906
antd table 表头文本禁止换行（white-space:nowrap;），设置表格高度，出现纵向滚动条（scroll={{ y: 200 }}），这个是表头和表格主体部分被渲染成两个table，表头文本出现遮挡 解决办法： 表头不应该通过样式禁止换行，应该通过样式加大表格主体单元的的最小宽度，把表头撑开 ...
ant design vue table 表格设置了表头固定后单元格被遮挡（笔记）
Huang_John的博客
08-01 1065
antdv table表格被遮挡
部分表格边框被挡住问题
xiaocuizao的博客
03-21 861
用table的时候当有滚动条的时候，发现在表格加载出来后，上面部分的下边框被挡住， 解决 ：border-collapse:collapse
基于 vxe-table 表格的适配插件，用于兼容 ant-design-vue 组件库
最新发布
05-28
npm install vxe-table@next vxe-table-plugin-antd@next ant-design-vue@next // ... import VXETable from 'vxe-table' import VXETablePluginAntd from 'vxe-table-plugin-antd' import 'vxe-table-plugin-antd/...
ant-table 表格组件样式
weixin_41012767的博客
12-03 861
ant-table 表格组件样式
ant-vue1.78版监听a-modal遮罩层的滚动事件
m0_52313178的博客
08-28 590
我们可以看到弹框过大，右侧已经出现了滚动条，然后左边的下拉框由于随着遮罩层滚动条的滚动，下拉项的列表脱离了原有的位置，就很丑，没有跟随下拉菜单移动，这也许是ant的缺陷，这个时候我们需要监听遮罩层的滚动，及时的让下拉菜单失焦就可以解决这个问题，由于页面加载时弹框是没有出现的，明显是没有遮罩层的我们监听不到，监听时机很重要，上代码。我们开发过程中经常有遇到监听页面滚动的事件需求，去做一些下拉加载或者是下拉分页的需求，我们直接在vue的生命周期中去绑定事件监听非常的方便，但如果是弹框的遮罩层的滚动监听呢？
ant design Modal遮罩层颜色加深 解决方案
10年职场两茫茫，35岁凄凉奈若何
06-14 240
ant design Modal遮罩层颜色加深 解决方案
antd table 固定列 遮挡滚动条解决
weixin_61028990的博客
07-06 546
【代码】antd table 固定列 遮挡滚动条解决。
【踩坑纪实】Ant Design Table 如何动态自定义？Ant Popover 遮挡？
m0_51810668的博客
01-18 647
项目场景： 基于electron + Vue + node.js + express + mysql + evanpatchouli-mysql + Ant-Design-Vue，编写一款属于自己的轻量级MySQL数据库界面工具。 问题列表 如何动态渲染高度自定义的Ant Design Table？ Ant Design Table 表头固定，内部Popover意外遮挡 问题描述 问题1        作为一款数据库界面工具，需要
ant design Vue 固定列后出现空白列的情况（亲测可用）
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
01-14 1246
当表格固定右侧列之后当表头过短时会出现空白列的情况，这个时候给表头数据的固定列加上固定宽度就解决了。
Ant Design Vue表格组件添加fixed:left属性之后标题的底色消失问题解决
m0_52449484的博客
10-08 233
解决Ant design vue Table组件添加列固定属性fixed:left之后标题的底色消失的问题
bootstrap-table 线上问题解决：多层 table-header 只显示一层，剩余被table-body 挡住
AlaiaCodeingLife
07-08 1899
当时业务需求是要制作一个多层 header，如图： 使用bootstrap-table 会自动渲染，只用添加两个属性，写法如下： colspan: 2 //合并列 rowspan: 1 //合并行 遇到问题：多层 table-header 只显示一层 解决方法： 使用Chrome进行开发者排查，发现是header的那一层高度被bootstrap-table限制在35...
ant-design-vue3 table组件合并单元格
04-28
ant-design-vue3是一款基于Vue 3+的UI组件库，提供了丰富的组件以便用于构建现代化的Web应用程序。其中ant-design-vue3 table组件提供了许多数据表格显示的功能和特性，如分页、筛选、排序、合并单元格等，可以很方便地满足不同场景的需求。 要实现单元格合并，我们需要首先定义合并的规则，通常是通过设置rowspan和colspan两个属性来合并细胞，这两个属性分别表示当前单元格所占的行数和列数。具体实现步骤如下： 1. 首先需要对要合并的单元格进行排序，以确保被合并的单元格是连续的。 2. 在table的columns中设置需要合并的列的render函数，在render函数中判断当前单元格是否需要进行合并，如果需要返回合并后的单元格，否则正常渲染单元格内容。 3. 在合并单元格的过程中，我们需要考虑跨行和跨列的情况，因此需要记录当前列和行的索引，以便后面的单元格判断是否需要合并。 4. 在处理完表格数据后，将合并好的数据返回即可。 总之，ant-design-vue3 table组件的合并单元格功能通过设置rowspan和colspan两个属性来实现，利用render函数对合并规则进行判断，同时需要考虑跨行和跨列的情况，最终返回合并后的表格数据。通过这种方式，可以很方便地在数据表格中实现单元格合并的效果，提高数据的展示效率和可读性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值