在表格中使用的时候,Popconfirm组件会出现样式错乱问题,如下:
检查组件元素,发现是在body上创建的元素,我这个table带了横向滚动条,实际上body宽度没有那么大,删除按钮在横向滚动条外,所以就会出现样式错乱问题,可以在使用的时候如下操作(设置getPopupContainer,改变浮层渲染父节点):
<Popconfirm title='是否要删除?' getPopupContainer={(triggerNode) => triggerNode.parentElement}>
<Button type='link'>删除</Button>
</Popconfirm>
上面方式是在组件上去优化,还有一种方法是在操作上优化,因为是Table的最后一列操作项,一般来说用户都不希望滑动滚动条去看到操作,所以可以把操作列固定在右侧,table的columns最后一列设置fixed:'right'