在 Ant Design 库中编辑 Transfer 的 header 组件 [英] edit header component of Transfer in Ant Design library

问题描述

在ant design免费版中使用传输组件，试图改变表格的标题文本

怎么做?

它的 AntDesign 文档非常糟糕，没有提及它，我不想相信它不存在，

演示沙盒链接；

示例代码框

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

using transfer component within free version of ant design and trying to change header text of table

how can it be done?

Its very poor of AntDesign documents there is no mention about it, I dont wanna believe its not exist,

demo sandbox link; https://codesandbox.io/s/7uc1g?file=/index.js

解决方案

You can use title and selectAllLabels prop to edit the headers.Both the props accept arrays. (Check your antd version if you still doesn't able to use those props)

 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>
                )
              ]}

Sample Codebox

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

这篇关于在 Ant Design 库中编辑 Transfer 的 header 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！