我用的是vue3 的写法
时间: 2024-02-09 19:11:15 浏览: 27
如果你使用的是 Vue 3,可以试试以下写法:
1. 在 `columns` 中,对需要设置颜色的标题设置 `title` 属性为 `h` 或 `span` 标签,例如:
```
{
title: <h4 style="color: red;">姓名</h4>,
dataIndex: 'name',
},
{
title: <span style="color: blue;">年龄</span>,
dataIndex: 'age',
},
```
2. 在表格组件中,设置 `customHeaderRow` 属性为自定义函数,例如:
```
const customHeaderRow = (columns, defaultRender) => {
return [
defaultRender({
columns: columns.map((column) => {
return {
...column,
title: typeof column.title === 'string' ? <span>{column.title}</span> : column.title,
};
}),
}),
<tr>
{columns.map((column) => {
return (
<th key={column.key}>
<div style={{ textAlign: 'center' }}>
{column.title}
</div>
</th>
);
})}
</tr>,
];
};
<Table
columns={columns}
dataSource={dataSource}
customHeaderRow={customHeaderRow}
/>
```
这里定义了一个名为 `customHeaderRow` 的函数,用于自定义表格标题的渲染方式。在函数中,先使用 `defaultRender` 方法来生成默认的表头行,然后再在这个基础上添加自定义的样式和颜色。
需要注意的是,在渲染表头时,需要判断 `title` 属性是否为字符串类型,如果是则需要将其包裹在 `span` 或 `div` 标签中。
这种方法可以灵活地根据需要设置不同颜色的标题,并且适用于 Vue 3。