在ant设计的免费版本中使用transfer组件,并尝试更改表格的标题文本
怎么做呢?
这是非常糟糕的AntDesign文档没有提到它,我不想相信它不存在,
发布于 2020-04-17 03:15:43
您可以使用title和selectAllLabels prop编辑headers.Both props accept数组。(如果你仍然不能使用这些道具,请检查你的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>
)
]}
示例Codebox
https://codesandbox.io/s/table-transfer-ant-design-demo-v4wxj?file=/index.js:2936-3517
发布于 2020-04-15 23:54:39
您应该查看源代码: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[];
}
https://stackoverflow.com/questions/61232765
复制相似问题