vue列表-到期时间与当前时间对比改变列表样式

实现方式

该功能通过根据到期时间的不同，动态改变列表行的样式来实现。

数据与方法

• rowClassName(record, index): 定义给定行的样式类名的方法，接受两个参数 record（行数据）和 index（行索引）。

效果图片

示例代码

<a-table :rowClassName="rowClassName" <!--省略其它代码--> > </a-table>

rowClassName(record, index) { 
const currentDate = new Date(); 
const stopDate = new Date(record.resource_expire_date); // 将数据的时间赋值给stopDate
const diffMillisecs = stopDate - currentDate; 
const diffDays = diffMillisecs / (1000 * 60 * 60 * 24); 
if (stopDate <= currentDate) { 
return 'expire_tr'; // 过期时间行的样式 
} else if (diffDays <= 5) { 
return 'expire_tr_soon'; // 离过期时间6天以内的样式 
} else if (diffDays > 5) { 
return 'expire_tr_woon'; // 过期时间5天以上的样式 
} else { 
return ''; 
} 
}

<style> 
.expire_tr { 
background-color: rgb(255, 240, 240); 
} 
.expire_tr_soon { 
background-color: rgb(255, 240, 240); 
} 
.expire_tr_woon { 
background-color: rgb(255, 255, 255); 
} 
</style>

在 Vue 组件中，使用 :rowClassName 属性绑定rowClassName 方法来动态设置行的样式类名。在rowClassName 方法中，根据当前时间和到期时间的差值来判断行的样式，并返回相应的样式类名。

使用方法

将以上示例代码整合到您的 Vue 组件中，可以根据到期时间的不同情况设置行的样式。您可以根据实际需求，在 CSS 文件中定义相关样式类，如 expire_tr、expire_tr_soon 和 expire_tr_woon，来设置不同样式的效果。