css - 如何在 Ant Design 中调整拖动行的高度？

Question

我正在使用 Ant Design 在 React 中制作一个带有可拖动行的表格。我注意到表中行的一种行为是，当您单击拖动手柄时，列之间的许多空白消失了，这是可以接受的。

但是，在某些情况下，我会有一行有足够的文本需要另一行文本，但是当我单击拖动该行时，减少的空格为所有文本提供了足够的空间以移回一行。

我遇到的问题是，在这些情况下，拖动的行似乎仍然有额外的文本行的额外空间，所以我得到了这个看起来不太好的额外空白空间。您还会注意到拖动手柄也会向上移动并偏移。

有没有办法让行动态调整它的高度，这样我就不会得到额外的空间？

 

这是演示问题的代码片段（您可以将代码复制粘贴到此代码框链接中 - 您可能需要编辑文本以获得相同的效果，具体取决于您的显示器大小）：

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
import { MenuOutlined } from '@ant-design/icons';
import arrayMove from 'array-move';

const DragHandle = sortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);

const columns = [
  {
    title: 'Sort',
    dataIndex: 'sort',
    width: 30,
    className: 'drag-visible',
    render: () => <DragHandle />,
  },
  {
    title: 'Name',
    dataIndex: 'name',
    className: 'drag-visible',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'Sir Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Senior',
    age: 32,
    address: 'New York No. 1 Lake Park, New York, USA',
    index: 0,
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    index: 1,
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    index: 2,
  },
];

const SortableItem = sortableElement(props => <tr {...props} />);
const SortableContainer = sortableContainer(props => <tbody {...props} />);

class SortableTable extends React.Component {
  state = {
    dataSource: data,
  };

  onSortEnd = ({ oldIndex, newIndex }) => {
    const { dataSource } = this.state;
    if (oldIndex !== newIndex) {
      const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);
      console.log('Sorted items: ', newData);
      this.setState({ dataSource: newData });
    }
  };

  DraggableContainer = props => (
    <SortableContainer
      useDragHandle
      disableAutoscroll
      helperClass="row-dragging"
      onSortEnd={this.onSortEnd}
      {...props}
    />
  );

  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']);
    return <SortableItem index={index} {...restProps} />;
  };

  render() {
    const { dataSource } = this.state;

    return (
      <Table
        pagination={false}
        dataSource={dataSource}
        columns={columns}
        rowKey="index"
        components={{
          body: {
            wrapper: this.DraggableContainer,
            row: this.DraggableBodyRow,
          },
        }}
      />
    );
  }
}

ReactDOM.render(<SortableTable />, document.getElementById('container'));

这是问题的可视化。

标签： cssreactjsantd