使用antd隐藏表格的列 [英] Hide column for table using antd

问题描述

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

How can we hide a column from the table for displaying in frontend which already exists in the array for using ant design table?

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

For example, I have a column called ID in my array object, but no need to show in the table view, it should be kept in the JSON list itself for some reference purpose.

小提琴链接-在此示例中，我不想在表格中显示ID列，但我已将该ID用于某些参考，例如行删除.

Fiddle link - In this example I don't want to show the ID column in the table, but I have used the ID for some reference like a row delete.

推荐答案

通常，Maktel的建议是正确的:您可以通过定义列中的 render (请注意，没有 dataIndex ):

Generally Maktel suggestion is correct: you can easily implement what you want by defining render in column (note that there is no 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} />;

这篇关于使用antd隐藏表格的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！