饿了么官网给的自定义例子是点击哪个日期在日期后面加个勾

而我们想要的是显示备忘录,像这样↓,日历上直接显示

这时候我们要把template里的代码改一下

<el-calendar>
<!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
<template
slot="dateCell"
slot-scope="{date, data}">
<p> <!--这里原本有动态绑定的class,去掉-->
{{ data.day.split('-').slice(1).join('-') }}<br /> {{dealMyDate(data.day)}}
</p>
</template>
</el-calendar>

  其实当我们刷新当前页面,或者点击日历上的日期选择其他月份,这个el-calendar都会重新渲染一次,slot="dateCell"这个插槽里的内容会被循环页面上显示多少个日期的次数

这时候我们就可以去匹配后台传回来的日期,然后加上备注,看js代码

<script>
export default {
data() {
return {
resDate: [
{"date":"2019-12-20","content":"放假"},
{"date":"2019-12-26","content":"去交电费"},
{"date":"2019-11-26","content":"去学习vue"}
]
}
},
methods:{
dealMyDate(v) {
console.log(v)
let len = this.resDate.length
let res = ""
for(let i=0; i<len; i++){
if(this.resDate[i].date == v) {
res = this.resDate[i].content
break
}
}
return res
}
}
}
</script>

最后就可以实现我们想要的样子

在vue中使用elementUI饿了么框架使用el-calendar日历组件,实现自定义显示备忘录标注的更多相关文章

  1. 在vue中使用elementUI饿了么框架使用el-tabs,切换Tab如何实现实时加载,以及el-table表格使用总结

    当我们在开发中遇到tab切换,这时候用el的el-tabs感觉很方便 但当我在把代码都写完后,发现一个问题就是页面打开时 虽然我们只能看见当前一个tab页,但是vue会帮你把你写的所有tab页的内容都 ...

  2. Django day 33 vue中使用element-ui的使用,课程的相关介绍,vue绑定图片,课程列表接口,课程详情页面

    一:vue中使用element-ui的使用, 二:课程的相关介绍, 三:vue绑定图片, 四:课程列表接口, 五:课程详情页面

  3. 在vue中使用Element-UI

    Element-UI是一套基于Vue2.0的UI组件库,http://element.eleme.io/#/zh-CN/component/carousel 首先npm install element ...

  4. 在vue中使用ElementUI

    完整引用ElementUI: 安装:在需要使用到的vue项目目录下,使用npm下载安装: npm/cnpm i element-ui -S/--save <!-- 引入样式 --> < ...

  5. vue中对element-ui框架中el-table的列的每一项数据进行操作

    vue中使用element table,表格参数格式化formatter 后台返回对应的数字, 那肯定不能直接显示数字,这时候就要对 表格进行数据操作 如图: 代码: methods: { //状态改 ...

  6. vue中computed(计算属性)和watch在实现父子组件props同步时的实际区分

    vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...

  7. vue中使用elementUI

    引入Element 因为整个项目是依赖ElementUI框架做的,所以采用了全部引入 1,在项目根目录执行命令:npm i element-ui -S进行安装 2,在main.js中引入element ...

  8. vue中使用elementUi (分页器的使用)

    1.安装 npm i element-ui -S 2.在main.js中引入 import ElementUI from 'element-ui' import 'element-ui/lib/the ...

  9. vue 中 使用 element-ui 发送请求前 校验全部表单,报警告: [Element Warn][Form]model is required for validate to work!

    WEB先生 2020-07-14 20:01:45  754  收藏 分类专栏: vue 文章标签: vue js 版权 报这种错可能有以下两种情况 1.属性绑定错误,确保绑定的是  :model  ...

随机推荐

  1. 70. Climbing Stairs QuestionEditorial Solution

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  2. C++ 中库函数bsearch的简单研究(含示例)

    /**//*bsearch函数声明如下: void *bsearch(const void *key, const void *base, size_t *nelem,                 ...

  3. symfony开发步骤简述

    对symfony具体开发也有了一定时间的接触了,下面说一下开发步骤,以备自己以后查看; 1.确定表关系,字段等 2.在相应的模块下的Rescourse下config/Doctrine创建相应的.orm ...

  4. 《数据结构与算法分析-Java语言描述》 分享下载

    书籍信息 书名:<数据结构与算法分析-Java语言描述> 原作名:Data Structures and Algorithm Analysis in Java 作者: 韦斯 (Mark A ...

  5. 分布式SnowFlakeID(雪花ID)原理和改进优化

    最近在研究分布式框架的组件和整体设计思路.所有的问题,一旦涉及分布式难度就呈几何倍数的提升.包括最常见的ID生成也是,单机情况下,使用数据库自增ID.UUID都是简单易行的选择 但在分布式环境下,就需 ...

  6. coroutine - yield from

    yield from yield from x 表达式对 x 对象所做的第一件事是,调用 iter(x),从中获取迭代器.因 此, x 可以是任何可迭代的对象. 可是,如果 yield from 结构 ...

  7. 自定义属性的访问 - Customizing attribute access

    自定义属性的访问 - Customizing attribute access 在 python 中, 下列方法可以实现类实例属性 instance.attribute 的 使用,设置,删除. obj ...

  8. 14-SSM整合

    今日知识 1. Spring整合MyBatis 2. SSM普通整合 3. SSM整合(Spring和SpringMVC分离) 4. 纯JavaConfig的SSM Spring整合MyBatis 1 ...

  9. 高级安全Windows防火墙概述以及最佳实践

    本文简单介绍Windows防火墙的概念,给出使用场景并列出了常见的防火墙操作. 简介 在Windows NT6.0之后微软推出了高级安全Windows防火墙(简称WFAS),高级安全Windows防火 ...

  10. Mac解决:xcode-select: error: command line tools are already installed, use "Software Update" to install updates

    1.因为node项目终端报错: No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'. No receipt for 'com ...