在 Ant Design 库中编辑 Transfer 的 header 组件

Question

在免费版的ant design中使用传输组件并尝试更改表格的标题文本

怎么办？

它的AntDesign文档很差，没有提到它，我不想相信它不存在，

演示沙盒链接； https://codesandbox.io/s/7uc1g?file=/index.js

Answer 1

您可以使用 title 和 selectAllLabels 属性来编辑标题。这两个属性都接受数组。 （如果您仍然无法使用这些道具，请检查您的 antd 版本）

 titles={[<Tag color="geekblue">I am on Left</Tag>, <Tag color="geekblue">I am on right</Tag>]}

 selectAllLabels={[
                ({ selectedCount, totalCount }) => (
                  <span>
                    {selectedCount} of {totalCount}
                    <Tag color="geekblue">left</Tag>
                  </span>
                ), ({ selectedCount, totalCount }) => (
                  <span>
                    {selectedCount} of {totalCount}
                    <Tag color="geekblue">right</Tag>
                  </span>
                )
              ]}

示例代码框

https://codesandbox.io/s/table-transfer-ant-design-demo-v4wxj?file=/index.js:2936-3517

Answer 2

您应该查看源代码： https://github.com/ant-design/ant-design/blob/master/components/transfer/index.tsx

也许可以尝试使用“titles”道具或 locale.titles 看看会发生什么，

其他道具：

export interface TransferProps {
  prefixCls?: string;
  className?: string;
  disabled?: boolean;
  dataSource: TransferItem[];
  targetKeys?: string[];
  selectedKeys?: string[];
  render?: TransferRender;
  onChange?: (targetKeys: string[], direction: string, moveKeys: string[]) => void;
  onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
  style?: React.CSSProperties;
  listStyle: ((style: ListStyle) => React.CSSProperties) | React.CSSProperties;
  operationStyle?: React.CSSProperties;
  titles?: string[];
  operations?: string[];
  showSearch?: boolean;
  filterOption?: (inputValue: string, item: TransferItem) => boolean;
  locale?: Partial<TransferLocale>;
  footer?: (props: TransferListProps) => React.ReactNode;
  rowKey?: (record: TransferItem) => string;
  onSearch?: (direction: TransferDirection, value: string) => void;
  onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => void;
  children?: (props: TransferListBodyProps) => React.ReactNode;
  showSelectAll?: boolean;
  selectAllLabels?: SelectAllLabel[];
}