AntDesign踩过的坑

一、表格：

1.size切换器（自 4.1.0 起，Pagination 在 total 大于 50 条时会默认显示 size 切换器以提升用户交互体验。）

// 使分页器始终存在
showSizeChanger: true,
// 自定义分页器大小
pageSizeOptions: [5, 10, 20, 50, 100],
// 默认分页器大小
defaultPageSize: 10

2.表格排序默认是：升序-》降序-》取消排序这样循环来的，如何去掉 取消排序这个功能，只允许升序-》降序或降序-》升序这样循环？

// 如果想要先降序再升序，就先desc再asc再desc
sortDirections={['ascend', 'descend', 'ascend']}

3. 切换表格分页时清空用户之前勾选的行

二、穿梭框

1.Antd穿梭框不支持自定义左右footer，那就通过设置样式来吧！（elementUI的穿梭框是支持slot='leftFooter' slot=‘rightFooter’的）悄悄地吐槽一下~~

修改前：

修改后：

// 我这里是带表格的穿梭框（有一说一，这一点antd还是挺厉害的）
<TableTransfer
  // dataSource数据源，其中的数据将会被渲染到左边一栏中，targetKeys 中指定的除外
  dataSource={mailTransData.dataSource}
  // targetKeys 显示在右侧框数据的 key 集合
  targetKeys={mailTransData.targetKeys}
  showSearch='true'
  onChange={onTransferMailChange}
  filterOption={(inputValue, item) =>
    item.names !== null
      ? item.receiveName.indexOf(inputValue) !== -1 ||
        item.names.indexOf(inputValue) !== -1
      : item.receiveName.indexOf(inputValue) !== -1
  }
  titles={['未选择', '已选择']}
  leftColumns={mailTableColumns}
  rightColumns={mailTableColumns}
  locale={{
    searchPlaceholder: '请输入接收人/接收组名称'
  }}
  footer={renderMAilFooter}
/>

// footer中显示了两个按钮
  const renderMAilFooter = () => (
    <div>
      <Button size='small' type='link' onClick={addMailAll}>
        全部添加
      </Button>
      <Button size='small' type='link' onClick={delMailAll}>
        全部移除
      </Button>
    </div>
  )

// 样式：
.ant-transfer{
    font-size: @font-size-base;
    line-height: @line-height-base;
    .ant-transfer-list{
        height: 380px;
        padding: 0 16px;
        border-radius: 3px;
        &-header{
            border-bottom: 0;
            padding: 8px 0px 9px;
            &-dropdown, &-selected{
                display: none;
            }
            &-title{
                text-align: left;
            }
        }
        &-body-search-wrapper{
         padding: 0px 0 8px;
         .ant-transfer-list-search-action{
             top:0;
             bottom:0;
         }
        }
        &-body-customize-wrapper{
            height:calc(100% - 52px);
            overflow: auto;
            .ant-table{
                .ant-empty.ant-empty-normal{
                    margin:76px auto;

                }
            }
        }
 // 通过样式控制左边穿梭狂显示第1个按钮，右边穿梭狂显示第2个按钮
        &:first-child{
            .ant-transfer-list-footer{
                .ant-btn:last-child{
                    display: none;
                }
            }
        }
        &:last-child{
            .ant-transfer-list-footer{
                .ant-btn:first-child{
                    display: none;
                }
            }
        }
        
    }
}