升级v4 的antd ,表格Table中空白间隙清除办法

先明确业务需求,一个表格里面动态显示或者隐藏一列或者多列, 首先咱们要明白控制表格组件中列的显示的属性是哪个---columns,
所以我们可以再columns中使用三元表达式进行判断

columns: [
        checkedValues.indexOf('shortMessageId') !== -1
          ? {
             
              key: 'shortMessageId',
              dataIndex: 'shortMessageId',
              align: 'center',
            }
          : {
              // 隐藏该列
              className: styles.hidden,
              width: 0,
              overflow: 'hidden'
            }]

如果没有选择,就把width设置为0,同时可以加上classname进行css,display:none做隐藏

但是在antd 4 中这样的方法不可取,display none 只能将表头的那个单元格隐藏,会导致列与列的顺序错乱

同时设置width:0 也有一点问题就是会有两个边框重叠导致比其他的边框要粗1px 当然也通过css进行删除,但是由于太过冗余,加上有点懒,x先想问问大家有没有好的解决方法?

是可以重置columns的,但是我的需求是有三列可以单独隐藏单独显示,所以这样一组合,需要些好多个columns就比较麻烦,不过最后也是通过三个if来判断,第一个头插 第三个尾插,中间那个要做双重判断,因为插入的index,跟第一个插入有关系.