使用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"
/>

这样会发现表头的数据有些换行了,但是操作的那列表高度并没有相应的增加,导致有错行的情况,因此将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;
}

附上改后的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;
}

max-content直接写在table的scroll={{ x: ‘max-content’ }}中发现在火狐有时候没起作用,因此才会有下面的浏览器兼容。但是单独看max-content的兼容性还是很不错的。emmmmm…#_#!!! 很无奈呀
这些修改其实就是覆盖了原来的overflow:hidden变成overflow: visible,然后添加z-index: 999999。要说具体的原因,其实并没有了解到本质,就是解决了这个问题而已,如果有遇到相似问题的朋友并且又刚好知道为什么的话,麻烦告知,感激不尽!

猜你喜欢

转载自blog.csdn.net/weixin_39256211/article/details/85014246