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

1. 使用场景

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

2. 实现方式

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

<a-table
	class="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);
}