Конфигурация муравья - PullRequest
Новая
       45

Конфигурация муравья

0 голосов
/ 24 января 2020

Я работаю с компонентом Ant Design Table и не могу определить различные структуры столбцов для расширенного свойства, сравниваемого с таблицей root.

Теперь, если вы запустите приведенный ниже код, вы найдете родительский элемент структура столбца и дочерний элемент или может сказать, что расширенная структура таблицы одинакова.

Я хочу знать, как можно сделать структуру родительского и дочернего столбца разной.

ПРИМЕЧАНИЕ. Я не могу использовать свойство "extendedRowRender", потому что мы не хотим показывать свойство расширения для каждой строки.

Структура, показанная на этом изображении 

      NAME(Column Name)    Age              Address
      Mick                 1                New York No. 1 Lake Park
+     John Brown sr.       2               New York No. 2 Lake Park
           Name            Age              Address
           John Brown      1                New York No. 1 Lake Park
           Any Name        2                New York No. 2 Lake Park
      Amey                 3                New York No. 3 Lake Park

Вы можете видеть, что структура столбцов уровня 1 и уровня 2 одинакова. Я пытаюсь выяснить, как я могу дать другую структуру, и вы видите, что все строки не имеют свойства расширения. Это свойство есть только во втором ряду.

Сеньор извинения, если я не смог правильно задать вопрос. 


import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: '12%',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    width: '30%',
    key: 'address',
  }
];

const data = [
  {
    key: 1,
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        aa: 11111,
        bb: 22222,
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park',
      },
      {
        key: 12,
        name: 'John Brown jr.',
        age: 30,
        address: 'New York No. 3 Lake Park',
        children: [
          {
            key: 121,
            name: 'Jimmy Brown',
            age: 16,
            address: 'New York No. 3 Lake Park',
          },
        ],
      },
      {
        key: 13,
        name: 'Jim Green sr.',
        age: 72,
        address: 'London No. 1 Lake Park',
        children: [
          {
            key: 131,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 2 Lake Park',
            children: [
              {
                key: 1311,
                name: 'Jim Green jr.',
                age: 25,
                address: 'London No. 3 Lake Park',
              },
              {
                key: 1312,
                name: 'Jimmy Green sr.',
                age: 18,
                address: 'London No. 4 Lake Park',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

ReactDOM.render(
  <Table columns={columns} dataSource={data} />,
  document.getElementById('container'),
);

1 Ответ

0 голосов
/ 26 января 2020

ПРИМЕЧАНИЕ: я не могу использовать свойство "extendedRowRender", потому что мы не хотим показывать свойство расширения для каждой строки.

Мне приходилось делать подобные вещи. Поэтому я использовал extendedRowRender, а также другое имя класса для строки (в зависимости от того, имеют ли они расширенное свойство (item.children)) и использовал свойство css, чтобы скрыть кнопку расширения в строке, у которой нет дочерних элементов. 

.class_name_to_hide_expand .ant-table-row-expand-icon-cell .ant-table-row-expand-icon{
  opacity: 0;
  pointer-events: none
}
...