vue搭配Element-ui的el-calendar日历组件使用

本文介绍如何通过后台接口获取车辆每日里程数据,并在el-calendar组件中按日期显示,实现里程数的动态展示,便于数据跟踪与分析。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:车辆设备在这个月对应日期中所走的里程数,在对应日期上展示;

实现:后台接口请求返回数组(对应日期的对应里程数);

[{

time:'2021-01-22',

distance:509

}]

将日期和里程数分别放在两个数组中,el-calendar组件显示日期的时候,判断接口判断的日期数组中是否包含当前这个日期,如果有则在这个日期显示里程数(通过下标找到对应的里程数,css样式都是可以更改的)

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值