elementui日历组件实现可标记日历 |
您所在的位置：网站首页 › 日历标记 › elementui日历组件实现可标记日历 |
elementui日历组件实现可标记日历
|
这是日历的组件。 handleSelected(day) { let flag = "1"; //默认显示为0 // 没有交易年度 2深色有 3浅色无 this.hasYearNot.forEach((item) => { if (item == day) { //判断显示数据 flag = "3"; return; } }); this.hasYear.forEach((item) => { if (item == day) { //判断显示数据 flag = "2"; return; } }); return flag; }, hasYearNot hasYear这两个数组是需要被标记的日期。 后台需要返回的数据格式,需要后台标识好我们需要标记的日期。 //请求获取后台返回的数据，需要后台做好标识，哪个日期需要标记什么颜色 getCal(val) { let month = new Date(val).getMonth() + 1; let year = new Date(val).getFullYear(); getHomeNotice({ orgId: this.orgId, issue: `${year}-${month}` }).then( (res) => { for (let key in res.data) { if (res.data[key] == "1") { this.hasYearNot.push(key); } else if (res.data[key] == "2") { this.hasYear.push(key); } } } ); } { "status":200, "msg":"查询成功", "rel":true,"data": {"2021-06-20":"2", "2021-06-21":"2", "2021-06-22":"1"} } .cal ::v-deep.el-calendar-day .calendar_circle1 { margin: 0 auto; padding: 2px; text-align: center; } .cal ::v-deep.el-calendar-day .calendar_circle2 { border: 1px solid #DE4747; border-radius: 50%; margin: 0 auto; padding: 2px; text-align: center; }给不同的圈设置不同的样式。 ending~~~~~ |
这是最后实现的效果，需要用圈来标记日期，有红色的标记和黄色的标记，开始找了很多插件，但是没有找到合适的能实现效果了，最后看到了其他相似的例子实现了这个需求【本文地址】
今日新闻 |
推荐新闻 |