wangtao0101 / react-virtualized-transfer

Transfer component with virtualization
https://wangtao0101.github.io/react-virtualized-transfer/
MIT License
14 stars 3 forks source link

render里面标签元素加入title属性,显示[object,object] #2

Closed helloliduofu closed 5 years ago

helloliduofu commented 5 years ago

image

代码如下:

const adsGroupList = [{adGroupId: "11"
adGroupName: "623313"
createTime: "2019-07-01 00:00:00"
mGroupId: "1636917053013019"
mediumAccount: "test@test.com"
mediumAccountAlias: "test"
mediumAccountId: 15}]
const isEdit = false;
<Transfer
                    disabled={isEdit}
                    dataSource={adsGroupList.map(item => ({
                      ...item,
                      disabled: isEdit
                    }))}
                    titles={["未选择", "已选择"]}
                    searchPlaceholder="请输入搜索内容"
                    notFoundContent="暂无数据"
                    rowHeight={32}
                    listStyle={{
                      width: 360,
                      height: 400
                    }}
                    showSearch
                    lazy={{ height: 32, offset: 32 }}
                    filterOption={this.filterOption}
                    targetKeys={this.state.targetKeys}
                    onChange={this.handleChange}
                    render={item => (
                      <span
                        title={`${item.adGroupName}(${item.mediumAccount})`}
                      >
                        {item.adGroupName}
                      </span>
                    )}
                    rowKey={item => item.adGroupId}
                  />
wangtao0101 commented 5 years ago

You can rewrite your render function and return { label, value } like antd transfer.

每行数据渲染函数,该函数的入参为 dataSource 中的项,返回值为 ReactElement。或者返回一个普通对象,其中 label 字段为 ReactElement,value 字段为 title
renderItem = () => {
  ...
 return {
  label,
  value,
 }
}