使用ant design的table控件最后一列固定（fixed）遇到的问题

Dear 丶 2023-07-16 09:56 9阅读 0赞

工作以来一直在做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