vue3 ant-design 4.x 表格动态行样式设置
vue3 ant-design 4.x 表格动态行样式设置
- 1. 使用场景
- 2. 实现方式
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);
}