react 自定义Table Column标题
时间: 2023-08-18 22:03:49 浏览: 53
在 React 中自定义 Table Column 标题可以通过两种方式实现:
1. 使用自定义组件作为 Column 标题
可以通过使用自定义组件来渲染 Table Column 标题。在 Column 的 `title` 属性中传入一个函数,该函数返回一个自定义组件,例如:
```jsx
import React from "react";
import { Table } from "antd";
const columns = [
{
title: () => <div>自定义标题1</div>,
dataIndex: "name",
key: "name"
},
{
title: () => <div>自定义标题2</div>,
dataIndex: "age",
key: "age"
}
];
const data = [
{
key: "1",
name: "John Brown",
age: 32
},
{
key: "2",
name: "Jim Green",
age: 42
}
];
const CustomTable = () => {
return <Table columns={columns} dataSource={data} />;
};
export default CustomTable;
```
2. 使用对象方式定义 Column 标题
在 Column 中可以直接使用对象的方式定义标题,并设置样式,例如:
```jsx
import React from "react";
import { Table } from "antd";
const columns = [
{
title: (
<div style={{ color: "#f00", fontWeight: "bold" }}>自定义标题1</div>
),
dataIndex: "name",
key: "name"
},
{
title: (
<div style={{ color: "#00f", fontWeight: "bold" }}>自定义标题2</div>
),
dataIndex: "age",
key: "age"
}
];
const data = [
{
key: "1",
name: "John Brown",
age: 32
},
{
key: "2",
name: "Jim Green",
age: 42
}
];
const CustomTable = () => {
return <Table columns={columns} dataSource={data} />;
};
export default CustomTable;
```
以上两种方式都可以实现自定义 Table Column 标题的效果,具体选择哪种方式可以根据实际需要来决定。