Question

我们如何隐藏表格中的一列以便在前端显示，而该数组已经存在于使用ant design表格的数组中？

例如，我在数组对象中有一列称为ID的列，但无需在表视图中显示，出于某些参考目的，应将其保留在JSON列表中。

Fiddle link-在此示例中，我不想在表中显示ID列，但是我已将ID用于某些引用，例如行删除。

Answer 1

如果您的列具有可见属性，则可以按以下方法重写标头和正文呈现方法。

import React, {Component} from 'react';

class Test extends Component {
  render() {
    const renderBody = (props, columns) => {
      return (
        <tr className={props.className}>
          {columns.map((item, idx) => {
            if (item.visible) {
              return props.children[idx]
            }
          })}
        </tr>
      );
    }

    const renderHeader = (props, columns) => {
      return (
        <tr>
          {columns.map((item, idx) => {
            if (item.visible)
              return props.children[idx];
          })};
        </tr>
      );
    }

    const columns = [{
      title: 'col1',
      dataIndex: 'col1',
      visible: true
    }, {
      title: 'col2',
      dataIndex: 'col2',
      visible: false
    }]

    return (
      <Table
        rowKey="key"
        columns={columns}
        dataSource={data.list || []}
        components={{
          header: {
            row: (props) => renderHeader(props, columns)
          },
          body: {
            row: (props) => renderBody(props, columns)
          },
        }}
      />
    )
  }
}

Answer 2

Table的属性columns用于控制表将呈现哪些列，但对用作dataSource的数据的形状没有影响。省略列不会从dataSource中删除其值，例如，您仍然可以在该列的render属性中引用它（例如，生成回调）。

示例代码（请注意，hiddenValue未被任何列的dataIndex属性直接引用，可以完全省略）：

const TableWithHiddenColumn = () => {
    const dataSource = [
        { renderedValue: 'foo', hiddenValue: 'id_1' },
        { renderedValue: 'bar', hiddenValue: 'id_2' },
        { renderedValue: 'biz', hiddenValue: 'id_3' },
    ];

    const columns = [
        { title: 'Visible column', dataIndex: 'renderedValue', key: 'renderedValue' },
        {
            title: 'Action',
            key: 'action',
            render: (record) => (
                <Button
                    onClick={() => {
                        console.log(record.hiddenValue);
                    }}
                >
                    {record.hiddenValue}
                </Button>
            ),
        },
    ];

    return <Table columns={columns} dataSource={dataSource} />;
};

结果：

Answer 3

通常，Maktel的建议是正确的：您可以通过定义render in column来轻松实现所需的内容（请注意，没有dataIndex）：

let columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  },
  {
    title: "Action",
    key: "action",
    render: (row) => {
      let api = "/api/v1/row/delete/";
      //this ID be sued for POST delete row like a API below
      api = api + row.id;
      return <span onClick={() => { alert(api);}}>
         Delete
      </span >

    }
  }
];

let data = [
  {
    id: 312,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
  },
  {
    id: 1564,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
  }
];

const App = () => <Table columns={columns} dataSource={data} />;

Answer 4

如果您已经有了生成列的代码，那么比实现自定义渲染方法隐藏列要简单得多的选择就是将其从已完成的列列表中过滤出来，例如：

let columns = [
  {
    title: "Id",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  }
];

return columns.filter(col => col.dataIndex !== 'id');

Answer 5

将 display-none 设置为 className

const isSlaughter = variable === SaleOfAnimalsType.Slaughter


  {
    title: 'Test',
    key: 'Test',
    className: isSlaughter ? 'display-none' : '',
    render: () => (
     <span>Test</span>
   ),
  }

Answer 6

这是我如何做到的。概念是一样的，就是从数组中移除（过滤掉）列。

向列对象添加“隐藏”属性，然后将其过滤掉。

let columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  },
  {
    title: "Action",
    key: "action",
    dataIndex: "action",
    hidden: true
  }
].filter(item => !item.hidden);

使用antd隐藏表格的列

6 个答案: