来自ant表的dataIndex接受2个传入数据

Question

我希望我的第一列标题名称接受来自我的graphql查询的2个数据。 "rocket.rocket_name"和"links.wikipedia"将显示在渲染href中。 但是好像dataIndex只接受一个字符串。

const { Table, Divider, Tag } = antd;

const columns = [{
  title: 'Name',
  dataIndex: 'rocket.rocket_name',
  key: 'name',
  render: text => <a href="www.google.com">{text}</a>,
}, {
  title: 'Description',
  dataIndex: 'details',
  key: 'age',
}];

const data =  [
      {
        "id": "77",
        "rocket": {
          "rocket_name": "Falcon Heavy",
          "rocket": {
            "active": true
          }
        },
        "links": {
          "wikipedia": "https://en.wikipedia.org/wiki/Arabsat-6A"
        },
        "details": "SpaceX will launch Arabsat 6A to a geostationary transfer orbit from SLC-39A, KSC. The satellite is a geostationary telecommunications satellite built by Lockheed Martin for the Saudi Arabian company Arabsat. This will be the first operational flight of Falcon Heavy, and also the first Block 5 Falcon Heavy. All three cores will be new Block 5 cores. The side cores are expected to land at LZ-1 and LZ-2, and the center core is expected to land on OCISLY."
      }
    ]
ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);

Answer 1

如果要使用2列的组合值创建单元格，请使用列的render函数的第二个参数。

摘录自antd documentation：

在这里，text是dataIndex指定的列的值，而record将是具有行的对象（所有列的值）。

const columns = [
  {
    title: 'Name',
    dataIndex: 'rocket.rocket_name',
    key: 'name',
    render: (text, record) => <a href={record.links.wikipedia}>{text}</a>,
  },
  {
    title: 'Description',
    dataIndex: 'details',
    key: 'age',
  }
];

Answer 2

这是一个非常老的问题，但是很高兴知道Antd v4中已弃用嵌套路径。正如official document所说：

此外，重大变化将dataIndex从嵌套字符串路径（如user.age）更改为字符串数组路径（如['user', 'age']）。解决开发人员问题的这种帮助应该在包含.的字段上进行其他工作。

因此对于这个特定问题，dataIndex应该更改为['rocket', 'rocket_name']才能与Antd v4一起使用。

Answer 3

你可以试试这个

// Initialize the data
f_init_data() =>
    // 4000 tickers, broken down into 5 sets, because a string has a max size of 4096 characters.
    // 800 tickers, set 1
    array.push(a_str_set_ticker, "QQQ,QQQ,QQQ,AMZN,AMZN")
    array.push(a_str_set_y1, "267,300,222,3000,2000")
    array.push(a_str_set_y2, "338.2,200,111,2500,1000")