Блог

Главная - Вопросы по программированию - dataIndex из таблицы ant, принимающей 2 входящих данных

dataIndex из таблицы ant, принимающей 2 входящих данных

#reactjs #antd

#reactjs #antd

Вопрос:

Я хотел, чтобы название заголовка моего первого столбца принимало 2 данные из моего запроса graphql. "rocket.rocket_name" и "links.wikipedia" будет отображаться в render 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);

Ответ №1:

Если вы хотите создать ячейку, используя объединенные значения из 2 столбцов, используйте второй аргумент render функции столбца.

Выдержка из antd документации:

Функция (текст, запись, индекс) {}

Здесь — text значение столбца, указанное dataIndex , и record будет объектом со строкой (значениями всех столбцов).

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

Комментарии:

1. Что вы делаете, если хотите, чтобы if rocket был массивом, и вам нужен 0-й его элемент? в dataIndex ?

2. @Gezim попробуйте dataIndex: ['rocket', '0']

Ответ №2:

вы можете попробовать это

     {
        title: 'İd',
        dataIndex: ['id',"symbol"],
        key: 'id',
        render: (text,row) => <a title={row["symbol"]}>{row["id"]}</a>,
    },

Ответ №3:

Это очень старый вопрос, но полезно знать, что вложенный путь устарел в Antd v4. Как говорится в официальном документе:

Кроме того, основное изменение меняется dataIndex с пути к гнездовой строке user.age , например, на путь к строковому массиву, подобный ['user', 'age'] . Эта помощь в разрешении разработчика должна дополнительно работать над полем, которое содержит . .

Итак, для этого конкретного вопроса dataIndex следует изменить ['rocket', 'rocket_name'] на, чтобы работать с Antd v4.

Метки: ,