首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在Ant设计库中编辑Transfer的header组件

在Ant设计库中编辑Transfer的header组件
EN

Stack Overflow用户
提问于 2020-04-15 23:39:30
回答 2查看 1.1K关注 0票数 0

在ant设计的免费版本中使用transfer组件,并尝试更改表格的标题文本

怎么做呢?

这是非常糟糕的AntDesign文档没有提到它,我不想相信它不存在,

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-17 03:15:43

您可以使用title和selectAllLabels prop编辑headers.Both props accept数组。(如果你仍然不能使用这些道具,请检查你的antd版本)

代码语言:javascript
复制
 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

票数 4
EN

Stack Overflow用户

发布于 2020-04-15 23:54:39

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

也许可以试试"titles“道具或locale.titles,看看会发生什么。

其他道具:

代码语言:javascript
复制
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[];
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61232765

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档