使用 antd 隐藏表的列

本文介绍了使用 antd 隐藏表的列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我们如何隐藏表格中的列以在前端显示，该列已存在于使用蚂蚁设计表的数组中?

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.

Fiddle link - 在这个例子中，我不想在表中显示 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屋！