Antd Deign Pro的ProTable使用fixed固定后hover背景色出现混乱问题

最新推荐文章于 2024-04-15 11:25:01 发布
最新推荐文章于 2024-04-15 11:25:01 发布
阅读量522 收藏 9
点赞数 8
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RookieYoung/article/details/135503601
版权
本文介绍了如何在AntDesignTable组件中实现全局修改表格行hover效果的CSS样式，通过添加特定的CSS规则来改变表格行在鼠标悬停时的背景颜色。
摘要由CSDN通过智能技术生成

问题

在这里插入图片描述

在这里插入图片描述

解决方法

只需要把这段复制到你页面的样式文件，或者项目的全局文件就可以了

//冻结表格全局修改
.procom-protable table >  .ant-table-tbody .ant-table-row:hover .ant-table-cell-fix-left, .procom-protable table >  .ant-table-tbody .ant-table-row:hover .ant-table-cell-fix-right {
  background-color: #FAFAFA !important;
}
Rookie_键盘侠
关注
pro-table:Ant像Pro一样使用Ant Design Table！
05-28
此变更不影响继续使用 @ant-design/pro-table 这个 npm 包名安装使用此组件。@ant-design/pro-table:trophy: Use Ant Design Table like a Pro!DemoAPIpro-table 在 antd 的 table 上进行了一层封装，支持了一些预设...
antdv 组件踩坑-持续更新
volunteer1024的博客
02-13 965
antd 组件踩坑-持续更新a-tablea-table 固定列存在的情况下背景颜色问题a-table 多选选项 a-table a-table 固定列存在的情况下背景颜色问题 采用的方式是利用 scss 变量，对于不同主题选择不同的背景色（字体色等） antdv a-table 组件存在固定列的情况下，标题行和固定列的背景色不会随着父类变化，我的解决方案是全局设置。部分代码可供参考 // 全局处理表格样式（固定列存在情况下 固定列和标题行的问题） // 左侧固定 .ant-table-fixed-left
ant-design-vue table 表格组件错位解决
东扯葫芦西扯瓜——前端小菜鸟的博客
04-23 1万+
ant-design-vue table 表格组件错位解决原因查找错位消失机制解决思路试验一试验二解决的背后 table组件错位问题。 table组件错位，不管是用element-ui的table组件，还是ant的table组件，只要使用了列的fixed属性，在第一次进入页面时就会出现。 原因查找 经检查dom发现使用fixed后，table组件实际由3个table组成，左边一个，中间一个，右边一个 。如果中间表格有某一列的内容有换行或者特殊内容等， ，这会导致表格实际高度比没有特殊内容要高。三个表格
一个页面有两个Tab栏，tab中protable设置固定列及滚动条，横向移动滚动条会导致表头和表身错位问题。
weixin_43177685的博客
06-02 2286
antd Table/ proTable组件columns设置固定列fixed之后，横向移动滚动条会导致表头和表身错位问题
ant-design-vue中的table的某列fixed后导致的问题
卟啦啦的博客
12-16 4636
当table很多列的时候，需要使用column的fixed属性，但是这时会存在一个问题，就是存在鼠标事件穿透。当固定列悬浮时，固定列的鼠标事件就不会触发，继而触发底层的鼠标事件。这回导致固定列（即使包含按钮）的鼠标事件（点击，悬浮等）不能触发，当底层存在鼠标事件事件还会导致出现不必要的触发，而且这种触发往往是不易察觉的。 解决办法：在ant-design-vue， 使用fixed会是的固定列独立出来，只需要是的固定列的容器的z-index比table容器的z-index大就好。 示例：这里table的co.
vue解决老版本antd中table样式错乱
qq_52630125的博客
04-15 466
解决 antd，element 老版本出现的table 不对齐bug
使用Ant Design的Table表格最后一列固定（fixed）出现重复
04-12 1万+
操作列右侧固定。在列很少情况下出现重复问题 对于没有bordered边框解决方案 { title: '编号', dataIndex: 'id', sorter: true, width: 100, align: 'left', render: text => text || '-' }...
stand-admin-antdpro-demo:适用于Ant Design Pro的CRUD演示
04-07
StandAdmin is CRUD framework work perfectly with Antd Pro. 标准 CRUD 选取控件 多实例 批量操作 异形列表 异形查询 记录复制 多编辑 关联展开 新建初始值 数据转换-新建/编辑 数据转换-查询
FAQ: antd pro/umi 添加区块错误
01-08
虽然按照antd pro/umi官网构建的项目， 执行添加模块操作时： $ umi block add EmptyPage 或 $ umi block add https://github.com/umijs/umi-blocks/tree/master/demo 报出异常类似： × error AssertionError [ERR...
Ant Design Pro 之 ProTable使用操作
01-21
标签<ProTable> Pro-Table 是阿里Ant Design Pro V4版本，在Table基础上再封装的一个组件，包含完整的增删改查逻辑，不用复杂的操作，简单几个配置即可实现 官网Api地址 https://protable.ant.design/ 示例 V4版本...
antd-pro-hapijs-user：基于antd pro + hapi-api的带权限用户管理
02-03
restful前一级分离架构前端：基于ant design pro的Reacr web相关文章： 最初：基于hapijs的rest api服务器相关文章： 截图 用户列表编辑用户增加用户 查询用户删除用户 登录和验证 登录是采取令牌验证的方式 登录的...
使用ant design的table控件最后一列固定（fixed）遇到的问题
Cool的博客
03-18 7281
工作以来一直在做2b的项目，因此表单操作，权限设置，一些业务逻辑就做的比较多。 首先介绍下背景：前后端完全分离，前端技术栈使用react+redux+antd，经常是没有视觉设计，全凭产品需求文档··_··！最近产品来了个需求，需要做一个流程图，在流程图上点击文字时需要弹窗显示数据，因此渣渣一个需求里做了n个弹窗，弹窗上再弹窗。。。。。（心里无数XXX奔过），因此也遇到了不少的问题，流程图是个大模...
antd3.x版本table使用fixed错位问题修复
Kobeloveu
04-09 2948
问题如图： 修复后如下： 解决思路： fixed栏位高度没有自适应（即和子表格高度一致），通过获取元素ant-table-expanded-row，拿到子表格的高度（盒子a），且子表格在fixed栏位也插入了以ant-table-expanded-row命名的盒子（(盒子b)高度固定，导致错位）。通过观察，将a盒子的高度给b盒子，且设置定位，可以修复 expandedRowsChange = () =>{ setTimeout(()=>{ const d = docum
关于ant-designa固定表头和列对不齐的问题最简单解决方案
weixin_44481459的博客
06-04 2546
最近在用ant-design开发react项目，因为所用版本为3.0X，所以遇到了一些问题 1. 表头和列对不齐 看了官方文档，给每个表头都加了宽带，但是最后一列后会有空余，按推荐方法，还是没解决，最后F12了下，看了dom结构，改了一下代码，完成 .ant-table-fixed-header .ant-table-scroll .ant-table-header { min-width: 0px !important; } （要想表头自适应的话，最好用百分比） ...
解决Ant Design Vue2表格a-table左右fixed固定列的行高与内容区域的行高不一致
qq_38118138的博客
05-11 7304
ant-design-vue解决表格a-table列固定时行高不一致的问题
ant-design Table组件错位/对不齐
热门推荐
baozhuona的博客
06-28 3万+
此篇乃小伙伴们在花式踩坑antdesign的table组件后，总结的专治对不齐的十全大补丸，望君趁早服用及时康复，如果你还踩出了更多花样对不齐，欢迎臭jio的你前来补充
antdVue Table设置fixed相关问题
一入前端深似海
04-24 756
这真是一个巨坑！ 当你表格纯文字时，没有异常，如图： 但是表格内部出现下拉框他就会出现这样情况： 不管你怎么设置高度，以及y坐标都不管用。 直到百度到了 这里，貌似是因为行高这样的原因引起的。 于是给表格定义类名，给行内加上足够行高。 class="editDetail-table-force-nowrap" .editDetail-table-force-nowrap{ .ant-table-row{ line-height: 230%; } } 就很完美的解决。（an
antd合并表格,并使用fixed布局
weixin_57229715的博客
11-15 999
consttemp={};//当前重复的值,支持多列 /** *动态合并表格方法 *@param{*}text表格每列对应的值 *@param{*}data后台返回的展示数据数组,数据需要按字段排序 *@param{*}columns表格每列表头字段 */ constmergeCells=(text,data,columns)=>{ leti=0; ...
antdesignvue表格使用fixed出现空白列——已解决
King的博客
03-06 1932
【代码】antdesignvue表格使用fixed出现空白列——已解决。
如何使用antd pro table的`onResize`方法实现交互式调整列宽？
最新发布
09-07
Ant Design Pro (antd pro) 是基于 Ant Design 和 Umi 的企业级中后台前端/设计解决方案。在antd pro的Table组件中，`onResize`是一个属性，它用于设置一个函数，当用户调整表格列宽时，这个函数会被调用。 为了实现交互式调整列宽的功能，你需要在Table组件中设置`onResize`属性，并定义一个函数，该函数会在列宽变化时被触发。以下是一个简单的示例： 1. 首先，你需要定义一个函数来处理列宽变化的事件。这个函数可以接受两个参数：`newWidth`（新调整的列宽）和`index`（列的索引）。在这个函数中，你可以根据需要进行一些操作，比如记录日志、更新状态等。 ```javascript const handleResize = (newWidth, index) => { console.log(`列${index}的新宽度是：${newWidth}`); // 这里可以添加更多的逻辑，比如更新状态或者发送到后端 }; ``` 2. 接着，在Table组件中使用`onResize`属性来指定上面定义的`handleResize`函数： ```jsx <ProTable ... onResize={handleResize} ... /> ``` 3. 这样，当用户在界面上调整列宽时，`handleResize`函数就会被触发，并且可以获取到新调整的宽度和列的索引。 使用`onResize`属性时，需要注意的是，antd pro版本的不同可能会导致API有细微的差别，因此在实际使用时请参考当前版本的官方文档，以确保代码的正确性和兼容性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值