文章目录
- 使用 ant-design 官网上的 Table 固定样式
- 代码实现
- 效果展示
- 查找问题
- 解决方法
使用 ant-design 官网上的 Table 固定样式
链接: https://antdv.com/components/table-cn/#components-table-demo-fixed-columns
代码实现
由于我的项目要实现左边第一例为左固定,右边最后一列操作为右固定,按照官网上的操作一顿噼噼啪啪操作完后,效果图和代码如下:
效果展示
可以看到,我的 columns 列设置宽度的只有需要固定的列才添加了宽度。
添加完代码后,再次刷新页面查看页面效果,如下图:
查找问题
最后查看dom元素,发现问题所在,是固定的那些列被默认添加上了 50px 的高度,导致总体高度与我们没有添加固定列的那些高度不一致,出现了这种行没有对齐的问题。
解决方法
通过修改 css 将高度消除,达到行内对齐的需求
/deep/ .ant-table-tbody tr{
height: 50px !important;
}
添加完样式后再次查看页面,发现成功修改!!!
这次也是公司内的前端小姐姐帮忙解决的,自己在网上各种查找问题,找了两个多小时也没有找到解决方案,最后还是靠的别人帮忙解决的,出现了这种问题,我压根就没有向去修改 css 样式这方面想,只想着百度百度,所以好言相劝,遇到问题可以钻研,但是为了不浪费时间,最好不要太钻牛角尖,自己摸索半个多小时还是没有效果,就需要请教别人了,如果是自己学习的过程中,那么就没这个必要了,毕竟自己摸索过经验更为丰富,这个告诫只是针对于公司开发的,少浪费时间,多写代码才是正道理