javascript - 扩展后如何防止行调整？

Question

我正在使用 antd table和 antd transfer组件，我正面临 CSS 方面的小挑战。

我创建了一个 small example with codesandbox .如果我尝试扩展一行，您会看到其他列尝试自行调整。有什么办法可以防止这种情况发生吗？我不希望行自行调整。扩建后的 table 应该和扩建前一样。

这是我在上面共享的用于生成表格的沙箱链接中的代码。

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Transfer, Table, Tag } from "antd";

function difference(listOne, listTwo) {
  const set1 = new Set(listOne);
  const set2 = new Set(listTwo);
  const difference = new Set([...set1].filter(x => !set2.has(x)));
  return Array.from(difference);
}
// Customize Table Transfer
const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
  <Transfer {...restProps}>
    {({
      direction,
      filteredItems,
      onItemSelectAll,
      onItemSelect,
      selectedKeys: listSelectedKeys,
      disabled: listDisabled
    }) => {
      const columns = direction === "left" ? leftColumns : rightColumns;

      const rowSelection = {
        getCheckboxProps: item => ({ disabled: listDisabled || item.disabled }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({ key }) => key);
          const diffKeys = selected
            ? difference(treeSelectedKeys, listSelectedKeys)
            : difference(listSelectedKeys, treeSelectedKeys);
          onItemSelectAll(diffKeys, selected);
        },
        onSelect({ key }, selected) {
          onItemSelect(key, selected);
        },
        selectedRowKeys: listSelectedKeys
      };

      return (
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={filteredItems}
          size="small"
        />
      );
    }}
  </Transfer>
);

const mockTags = ["eg", "gg", "e"];

const mockData = [];
for (let i = 0; i < 20; i++) {
  let data = {
    key: i.toString(),
    title: `eq${i + 1}`,
    description: `description of eq${i + 1}`,
    disabled: false, //i % 4 === 0,
    tag: mockTags[i % 3]
  };

  if (i % 2 === 0) {
    const children = [
      {
        key: i.toString() + "children",
        title: `children-${i + 1}`,
        description: `children description-${i + 1}`,
        disabled: true,
        tag: "tag"
      }
    ];
    data["children"] = children;
  }
  mockData.push(data);
}

const originTargetKeys = mockData
  .filter(item => +item.key % 3 > 1)
  .map(item => item.key);

const leftTableColumns = [
  {
    dataIndex: "title",
    title: "Name"
  },
  {
    dataIndex: "tag",
    title: "Tag",
    render: tag => <Tag>{tag}</Tag>
  },
  {
    dataIndex: "description",
    title: "Description"
  }
];
const rightTableColumns = [
  {
    dataIndex: "title",
    title: "Names"
  },
  {
    dataIndex: "tag",
    title: "Tag",
    render: tag => <Tag>{tag}</Tag>
  },
  {
    dataIndex: "description",
    title: "Description"
  }
];

class App extends React.Component {
  state = {
    targetKeys: originTargetKeys
  };

  onChange = nextTargetKeys => {
    this.setState({ targetKeys: nextTargetKeys });
  };

  render() {
    const { targetKeys, disabled } = this.state;
    return (
      <div>
        <TableTransfer
          className="table-transfer"
          dataSource={mockData}
          titles={[
            <div>
              <input type="checkbox" checked />
              Equipment <input type="checkbox" checked /> Groups
            </div>,
            <div>
              <input type="checkbox" checked />
              Equipment <input type="checkbox" checked /> Groups
            </div>
          ]}
          targetKeys={targetKeys}
          disabled={disabled}
          showSearch={true}
          onChange={this.onChange}
          filterOption={(inputValue, item) =>
            item.title.indexOf(inputValue) !== -1 ||
            item.tag.indexOf(inputValue) !== -1
          }
          leftColumns={leftTableColumns}
          rightColumns={rightTableColumns}
          locale={{
            itemUnit: "Equipment",
            itemsUnit: "Equipments",
            notFoundContent: "The list is empty",
            searchPlaceholder: "Search here"
          }}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

Answer 1

您想限制您的列宽度，for example ，在 leftTableColumns 上试试这个，注意与右边的区别:

const leftTableColumns = [
  {
    dataIndex: 'title',
    title: 'Name',
    width: '45%'
  },
  {
    dataIndex: 'tag',
    title: 'Tag',
    render: tag => <Tag>{tag}</Tag>,
    width: '10%'
  },
  {
    dataIndex: 'description',
    title: 'Description',
    width: '40%'
  }
];

引用表 Column API .

你的代码箱的分支: