Javascript 蚂蚁设计表配置

我正在使用Ant Design表组件，无法找出与根表相比扩展属性的不同列结构

现在，如果您运行下面的代码，您将找到父列结构和子列结构，或者说扩展表结构是相同的

我想知道如何使父列和子列结构不同。

注意：我不能使用“expandedRowRender”属性，因为我们不想为每一行显示扩展属性

您可以看到级别1和级别2的列结构是相同的，我正在尝试找出如何提供不同的结构，您可以看到所有行都没有扩展属性。只有第二行具有该属性

如果我不能以恰当的方式提问，Sensior会向我道歉

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'),
);

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“./index.css”；
从“antd”导入{Table}；
常量列=[
{
标题：“姓名”，
数据索引：“名称”，
关键字：“名称”，
},
{
标题:"年龄",，
数据索引：“年龄”，
关键词：“年龄”，
宽度：“12%”，
},
{
标题：“地址”，
dataIndex:'地址'，
宽度：“30%”，
关键字：'地址'，
}
];
常数数据=[
{
重点:1,，
姓名：“老约翰·布朗”，
年龄:60,，
地址：“纽约第一湖公园”，
儿童：[
{
关键词：11，
机管局：11111，
bb:22222，
姓名：“约翰·布朗”，
年龄:42,，
地址：“纽约第二湖公园”，
},
{
关键词：12，
姓名：小约翰·布朗，
年龄:30,，
地址：“纽约第三湖公园”，
儿童：[
{
关键字：121，
姓名：“吉米·布朗”，
年龄:16岁，
地址：“纽约第三湖公园”，
},
],
},
{
关键字：13，
姓名：“老吉姆·格林”，
年龄:72，
地址：“伦敦第一湖公园”，
儿童：[
{
关键字：131，
姓名：“吉姆·格林”，
年龄:42,，
地址：“伦敦第二湖公园”，
儿童：[
{
关键字：1311，
姓名：小吉姆·格林，
年龄:25岁，
地址：“伦敦第三湖公园”，
},
{
关键字：1312，
姓名：“老吉米·格林”，
年龄:18岁，
地址：“伦敦第四湖公园”，
},
],
},
],
},
],
},
{
重点:二,，
姓名：“乔·布莱克”，
年龄:32岁，
地址：“悉尼第一湖公园”，
},
];
ReactDOM.render(
,
document.getElementById（'container'），
);

注意：我不能使用“expandedRowRender”属性，因为我们不想为每一行显示扩展属性

我不得不做类似的事情。所以，我使用expandedRowRender和行的不同类名（取决于它们是否具有展开属性（item.children）），并使用css属性隐藏没有子级的行上的展开按钮

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

---

您的问题不清楚，它是什么意思

列结构不同

您应该在问题中显示不同的含义谢谢@Dennis vash我将编辑一个问题以使其更清晰。谢谢您告诉我这种方法，我将尝试让您知道。谢谢。很高兴我能帮助你☺️

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