antdesign table 动态控制某个单元格字体加粗
时间: 2023-08-04 16:03:28 浏览: 67
可以通过自定义渲染单元格的方式来实现动态控制某个单元格字体加粗的功能。具体实现步骤如下:
1. 在表格的columns配置中,给需要控制字体加粗的列配置一个render属性,例如:
```
{
title: '姓名',
dataIndex: 'name',
key: 'name',
render: (text, record, index) => {
const isBold = record.isBold; // 假设isBold为true时需要加粗字体
return <span style={{ fontWeight: isBold ? 'bold' : 'normal' }}>{text}</span>;
},
},
```
2. 在表格的数据源中,给需要加粗字体的行添加一个isBold属性,例如:
```
const dataSource = [
{
key: '1',
name: '张三',
age: 18,
address: '上海市徐汇区',
isBold: true, // 假设需要加粗字体
},
{
key: '2',
name: '李四',
age: 20,
address: '北京市朝阳区',
isBold: false, // 假设不需要加粗字体
},
];
```
这样,当isBold为true时,该行对应的单元格字体就会加粗。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)