使用ant design的table控件最后一列固定(fixed)遇到的问题
工作以来一直在做2b的项目,因此表单操作,权限设置,一些业务逻辑就做的比较多。
首先介绍下背景:前后端完全分离,前端技术栈使用react+redux+antd,经常是没有视觉设计,全凭产品需求文档··_··!最近产品来了个需求,需要做一个流程图,在流程图上点击文字时需要弹窗显示数据,因此渣渣一个需求里做了n个弹窗,弹窗上再弹窗。。。。。(心里无数XXX奔过),因此也遇到了不少的问题,流程图是个大模块,遇到的问题等下次再细说,这次就简单讲下如题所述的情况
这就是所做的流程图(因为数据是内部的,只能将就了)只要有编辑的地方都会分情况出现各种弹窗。
这里就是产品和业务在做回归测试的时候出现的问题。tasble表格的宽度设成了130%,最后一列设定宽度130px,并且固定在表格右侧,在这列上给添加了两个按钮,编辑和删除。在页面渲染过程中会发现后一列的两个按钮直接没有,鼠标滑过的时候就会出现,或者是不在屏幕可视范围内的按钮不渲染,但是打开控制台,却能看见到dom结构是存在的,也是一脸懵逼啊。渣渣发现antd做最后一列固定是属于重写一个table结构,写出一模一样的一列然后使用定位的方式改在相应的位置上。估计是直接对表格上的最后一列做定位不好操作,所以才会写个一样的table结构定位到页面上进行覆盖。因此才会有哪些最后固定的一列不设置宽度时,出现两个一样的列
一开始渣渣对表格的设置是
<Table
rowSelection={rowSelection}
rowKey={record => record.key}
columns={columns}
dataSource={this.state.list}
bordered={true}
pagination={false}
scroll={{ x: '130%' }}
loading={tacheSearchList.request}
onChange={(pagenation, filters, sorter) => {
this.onTableChange(pagenation, filters, sorter)
}}
className="sku-table"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
这样会发现表头的数据有些换行了,但是操作的那列表高度并没有相应的增加,导致有错行的情况,因此将scroll={{ x: ‘130%’ }}改成了scroll={{ x: ‘max-content’ }}。针对渲染出现的异常情况,在antd的GitHub上翻遍了所有的issue也没有到类似的情况,只能自己尝试的改改了。
原来自带的css样式
.ant-table-fixed-left,
.ant-table-fixed-right {
position: absolute;
top: 0;
overflow: hidden;
transition: box-shadow 0.3s ease;
border-radius: 0;
}
1
2
3
4
5
6
7
8
附上改后的css
.ant-table-fixed-left, // 这个就是含最后一列固定的table表格类名
.ant-table-fixed-right {
z-index: 999999
overflow: visible
}
.ant-table th,
.ant-table td,
{
white-space: nowrap;
}
.ant-table-fixed { // 对max-content做浏览器兼容
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
max-content直接写在table的scroll={{ x: ‘max-content’ }}中发现在火狐有时候没起作用,因此才会有下面的浏览器兼容。但是单独看max-content的兼容性还是很不错的。emmmmm…#_#!!! 很无奈呀
这些修改其实就是覆盖了原来的overflow:hidden变成overflow: visible,然后添加z-index: 999999。要说具体的原因,其实并没有了解到本质,就是解决了这个问题而已,如果有遇到相似问题的朋友并且又刚好知道为什么的话,麻烦告知,感激不尽!
————————————————
转载:https://blog.csdn.net/weixin_39256211/article/details/85014246
使用ant design的table控件最后一列固定(fixed)遇到的问题相关推荐
- ant design vue 树形控件_官宣!vue.ant.design 低调上线
点击右上方,关注开源中国OSC头条号,获取最新技术资讯 官宣!官宣!官宣! 是的,你没看错就是那个 https://vue.ant.design. 至此,Ant Design 已经全面覆盖了 Reac ...
- 替 ASP.NET 的 Table 控件換裝
(本文撰寫於 ASP.NET 1.x 時期,但觀念.做法亦適用 ASP.NET 2.0) 在 ASP.NET 1.0 中,最火紅的資料顯示控件非 DataGrid 莫屬 (ASP.NET 2.0 的 ...
- SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍
这是 Jerry 2021 年的第 34 篇文章,也是汪子熙公众号总共第 310 篇原创文章. Jerry 前一篇文章 深入掌握 SAP Fiori Elements 工作原理系列之二:如何给 Fio ...
- ASP.net Table 控件
功能:在Web页中创建通用表. 属性: 1.CellPadding属性:用于设置表中单元格的边框和内容之间的距离(以像素为单位).默认为-1(未设置). 2.CellSpacing属性:用于设置表中单 ...
- ant design vue table分页
ant design vue table分页设置 1.设置pagination <a-table :columns="columns" :dataSource="d ...
- Ant Design Vue Table 组件合并单元格
Ant Design Vue Table 组件合并单元格 项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...
- ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色 一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
- vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用 场景复现 实际操作 解决a-table表格padding过宽 知识调用 文章中可能会 ...
- 在VS2008中DataGridView控件里DataGridViewComboBoxColumn列的Bug
在VS2008中DataGridView控件里DataGridViewComboBoxColumn列的Bug: SQL数据库表(Product)格式: 列:Guid 产品名称 产品规格. ...
最新文章
- Xilinx IP核专题之PLL IP核介绍(Spartan-6)
- AWS宣布Amazon S3将停止支持SigV2
- C/C++头文件一览
- 如何用JS实现音乐播放、暂停
- 架构漫谈(三):如何做好架构之识别问题
- mysql5.7.17主从_mysql5.7.17主从同步配置
- Axure教程-新手入门基础(小白强烈推荐!!!)
- MySQL调优的8种方式
- java fakepath_20140920遇到的问题--JAVA----JS------Tomcat7.0+Onselect灵敏度+fakepath等若干问题...
- 学习笔记:OriTripletLoss函数的解析 源码解析
- UVA 202 - Repeating Decimals(模拟)
- Redis知识总结(四万字)
- 人工智能——离线情况下自动给视频添加字幕,支持中文,英文,日文等等
- 【Pyhton TurtleArt】画一幅极简渐变风景图
- Ymodem协议介绍
- qemu 内核调试环境搭建
- Android的数据结构与算法----ArrayList源码解析
- torch.multinomial使用
- android 闹钟声音大小,使用闹钟音量设置的Android闹钟声音?
- ​女孩们的男装穿衣法则 用Prada打造时髦男友风穿搭
热门文章
- 机器学习领域各领域必读经典综述论文整理分享
- 一个可以在线编写matlab的网站,你了解吗?
- 面试篇-- Http、TCP/IP协议与Socket之间的区别
- 有没有能够在待办事项完成后标记任务已完成的每日计划APP?
- Dcloud IOS离线打包
- this指向及改变this指向的方法
- 文件服务器文件夹,共享文件夹及权限迁移
- android+4.2+浏览器,一款小巧的安卓浏览器 Via浏览器 v4.2.8
- 安徽工业大学计算机组成原理,安徽工业大学工商学院 计算机组成原理试卷12至13学年A卷...
- 安装多版本Chrome