ant design拖拽手柄列拖动时样式错乱的解决方案

 <Table
          rowKey="id"   //不要用官网的index，用后台返的id名
          components={{
            body: {
              wrapper: DraggableContainer,
              row: DraggableBodyRow,
            },
          }}
          pagination={false}
          dataSource={dataSource}
          columns={columns}
          loading={loading}
        >

 </Table>

//官网
  DraggableBodyRow = ({ className, style, ...restProps }) => {
    const { dataSource } = this.state;
    // function findIndex base on Table rowKey props and should always be a right array index
    const index = dataSource.findIndex(x => x.index === restProps[‘data-row-key‘]);   //这里用的是index
    return <SortableItem index={index} {...restProps} />;
  };
//改动
 const DraggableBodyRow = ({ className, style, ...restProps }) => {
    // const { dataSource } = this.state;
    // function findIndex base on Table rowKey props and should always be a right array index
    const index = dataSource.findIndex(x => x.id === restProps[‘data-row-key‘]);   //将index改为Table中设置的id名
    return <SortableItem index={index} {...restProps} />;
  };

.row-dragging td {
  padding: 16px;
  visibility: hidden;
  vertical-align: middle;   //这个控制样式居中，加上就可以了
}