react antd table 表头自定义
在 Ant Design 的 React 组件库中,你可以使用 Ant Design Table 组件,并通过 `columns` 属性来定义表格的列。如果你想要自定义表头,可以在 `columns` 中使用 `title` 属性,该属性可以接受一个 React 组件来实现自定义表头。
以下是一个简单的示例,演示如何使用 Ant Design Table 自定义表头:
首先,确保你的项目中已经安装了 Ant Design 相关的库:
```bash
npm install antd
```
然后,你可以在你的 React 组件中使用 Ant Design 的 Table 组件,并通过 `columns` 属性定义表格的列,包括自定义表头:
```jsxant design
import React from 'react';
import { Table } from 'antd';
const columns = [
  {
    title: '自定义表头1',
    dataIndex: 'column1',
    key: 'column1',
  },
  {
    title: '自定义表头2',
    dataIndex: 'column2',
    key: 'column2',
  },
  {
    title: '操作', // 这里是自定义表头
    key: 'action',
    render: () => (
      <span>
        <a href="#">编辑</a>
        <span style={{ margin: '0 8px' }}>|</span>
        <a href="#">删除</a>
      </span>
    ),
  },
];
const data = [
  {
    key: '1',
    column1: '数据1',
    column2: '数据2',
  },
  // ... 其他数据行
];
const CustomTable = () => {
  return <Table columns={columns} dataSource={data} />;
};
export default CustomTable;
```
在上面的例子中,通过在 `columns` 数组中定义一个包含 `title` 和 `render` 属性的对象,实现了自定义表头。`render` 属性接受一个函数,返回一个 React 元素,这里返回的是包含编辑和删除链接的 `<span>` 元素。
你可以根据实际需求自定义表头内容,利用 `render` 函数提供灵活性,以满足不同的设计和交互要求。