vue3 ant-design 4.x 表格动态行样式设置

1. 使用场景

告警数据需要依据是否已读展示不同的文字颜色

2. 实现方式

1）首先给a-table设置class，然后使用rowClassName属性绑定动态设置样式方法

<a-tableclass="alarm-table":dataSource="dataSource":columns="columns":loading="pageLoading":pagination="false"@change="onChange":rowClassName="handleTableClass"
>
....
</a-table>

2）依据实际需求编写样式方法

const handleTableClass = (record: TableItem) => {if (record.is_read) {return 'read-row'} else {return 'unread-row'}
}

3）在样式文件中配置样式

.alarm-table :deep(.read-row) td {color: #a0a0a0;
}
.alarm-table :deep(.unread-row) td {color: var(--color-text);
}