antd table column隐藏

若想隐藏Ant Design中的Table组件的某一列，可以在该列的配置项中设置 `hidden` 属性为 `true`。

例如：

<Table dataSource={dataSource}>
  <Column title="Name" dataIndex="name" key="name" />
  <Column title="Age" dataIndex="age" key="age" />
  <Column title="Address" dataIndex="address" key="address" hidden={true} />
</Table>

这样就会将表格中的“Address”列隐藏起来。

相关问题

antd Table.ColumnGroup 数据展示

在Ant Design(antd)的Table组件中，`ColumnGroup`是一种特殊的列，用于将一组相关的列组合在一起，并且作为一个单独的组进行显示。这可以帮助组织复杂的表格结构，特别是当数据有深度层次时，如树形数据或者需要分层展示的情况。

`ColumnGroup`通常通过`columns`配置数组内的嵌套结构来创建，其基本语法如下：

import { Table, Column } from 'antd';

const groupedColumns = [
  {
    title: '组1标题',
    children: [
      {
        title: '子列1',
        dataIndex: 'childData1',
      },
      {
        title: '子列2',
        dataIndex: 'childData2',
      },
    ],
  },
  {
    title: '组2标题',
    children: [
      {
        title: '子列3',
        dataIndex: 'childData3',
      },
    ],
  },
];

const normalColumns = [
  {
    title: '正常列',
    dataIndex: 'normalData',
  },
];

<Table columns={[...groupedColumns, ...normalColumns]} />;

在这个例子中，`Table`会首先展示`groupedColumns`里的两个组，每组内部的子列会被合并到一起。`normalColumns`则作为单独的一组展示在最后。

antd Table隐藏列

要隐藏Antd Table中的列，您可以使用`columns`属性来指定要显示的列。您可以将要隐藏的列从该数组中删除，然后将新数组传递给`columns`属性。例如，如果您要隐藏名称为“age”的列，可以按如下方式处理：

import React from 'react';
import { Table } from 'antd';

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

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const App = () => {
  const newColumns = columns.filter(column => column.key !== 'age');

  return (
    <Table columns={newColumns} dataSource={data} />
  );
};

export default App;

在上面的代码中，我们使用`filter()`方法来删除`columns`数组中的“age”列，并将新数组传递给`columns`属性。这将导致只显示“Name”和“Address”列。