在vue中使用elementUI饿了么框架使用el-calendar日历组件，实现自定义显示备忘录标注

最新推荐文章于 2024-07-12 10:39:00 发布
最新推荐文章于 2024-07-12 10:39:00 发布
阅读量4.5k 收藏 11
点赞数 3
分类专栏： vue 文章标签： vue.js
原文链接：https://www.cnblogs.com/bobo1/p/12106366.html
版权

https://www.cnblogs.com/bobo1/p/12106366.html
饿了么官网给的自定义例子是点击哪个日期在日期后面加个勾
在这里插入图片描述
而我们想要的是显示备忘录，像这样↓，日历上直接显示
在这里插入图片描述
这时候我们要把template里的代码改一下




{{ data.day.split(’-’).slice(1).join(’-’) }}
{{dealMyDate(data.day)}}




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

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

胖图图
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于vue，element组件制作可输入表格备忘录
NI_computer的博客
10-07 645
制作一个可以输入添加的备忘录，内容以表格形式呈现。 按下回车可添加，点击删除可根据id删除。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>备忘录</title>
el-calendar自定义日程，显示文字内容，el-date-picker和el-calendar互动互联
weixin_41346436的博客
05-13 570
效果展示首先el-calendar需要自定义日程内容的话，其格式一般必须满足如下结构{date: '2024-05-08', content: "数学模拟试卷(3)"},{date: '2024-05-08', content: "内容XXXX"},{date: '2024-05-03', content: "内容XXXX"},{date: '2024-05-28', content: "内容XXXX"},结构dom部分-- 日历组件 -->placeholder="选择月"
vue-element日历calendar组件个性化改造（备忘录圆点、点击事件）
weixin_41884808的博客
11-30 1万+
需求如图，总结如下 1.根据后台返回的数据，判断有备忘录的给出标注，memoLevel为紧急程度 1为紧急（红色），2一般（蓝色），3不重要（绿色），显示小圆点， 2.如果同一天出现很多条备忘录，根据第一条紧急程度显示圆点颜色， 3.点击每一天请求数据，显示当天的备忘录， 4.页面初始化显示当月数据 5.点击上个月、当天、下个月请求对应日期的数据 废话不说，上代码 html <el-col :lg="10" :xl="10" class="col2"> <d.
Element-ui自定义日历
最新发布
liulyly的博客
07-12 271
Element-ui实现自定义日历的一种方式，仅供参考
Element UI 的日历控件，并在日期中做标注
m0_65376942的博客
04-02 3857
需求：1.在日历中给日期做标注，点击日期获取到当前的日期 2.点击对应的上一月，下一月，今天可以获取到对应的月份 <template> el-card v-model="nowdate" shadow="always" :body-style="{ padding: '15px' }" style="height: 400px"> <el-calendar>
el-calendar备忘录与日程与公历农历
一个学vue用vue的前端大白,休闲听音乐，https://unpkg.com/v3demo/index.html
08-30 771
思路：只返回日程备忘指定日期的数据，在原有的el-calendar上渲染写入。
vue实现日历备忘录功能
01-19
用vue写了个日历备忘录的功能，省略了备忘录的增删改查功能。    直接上代码 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>备忘录</title> <style type=text/css> #box{ width: 469px; } /*日历*/ *{ padding: 0; margin: 0; } li{ list-style: none; } #calendar{ width:380px;
Vue实现备忘录功能
热门推荐
weixin_55229531的博客
06-02 1万+
Vue实现备忘录功能
vue-el-calendar.zip Vue -ElementUI 日历控件
06-21
vue-el-calendar.zip Vue -ElementUI 日历控件 以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
基于Vue2-Calendar改进的日历组件（含中文使用说明）
10-17
总之，这个基于Vue2-Calendar改进的日历组件不仅保留了原有组件的易用性，还增加了更多自定义选项，使得在Vue项目中实现日历功能变得更加便捷和高效。对于初学者或是有特定需求的开发者来说，这是一个值得学习和使用...
vue+elementUI实现简单日历功能
01-18
vue+elementUI简单的实现日历功能，供大家参考，具体内容如下 <div class=calender2> <div class=date-headers> <div class=date-header> <div><el type=primary click=handlePrev><i class=el-icon-arrow-left></i>上一月</el></div> <div>{{ year }}年{{ month }}月{{ day }}日</div> <div><el-button ty
vue-calendar.rar-Vue -ElementUI 日历控件-考勤日历表
01-13
vue-el-calendar.zip Vue -ElementUI 日历控件 以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
使用Vue-Grid-Layout实现自定义工作台
02-01
在本教程中，我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作台。 首先，我们需要安装 Vue-Grid-Layout 和其依赖 Vue.js。如果你还没有设置 Vue 项目，可以使用 Vue CLI 创建一个新的项目。在已有的项目中...
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
10-17
在Element UI框架中，`el-button`组件是一个常用的按钮组件，提供多种预设样式和功能。然而，在实际项目中，我们可能需要自定义按钮的颜色和图标以满足特定的设计需求。本篇文章将详细介绍如何在`el-button`组件中...
Element UI 自定义日历
Cookie686的博客
05-05 1147
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 Element UI 自定义日历代码示例HTML部分js部分 代码示例 HTML部分 <template> <el-calendar ref="calendar"> <template #header="{ date }"> <div style="background: #0c2035; width: 100%"> .
element-ui 日历组件calendar 自定义使用
weixin_42447659的博客
12-02 1万+
<el-calendar v-model="value" id="calendar"> <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--> <template slot="dateCell" slot-scope="{date, data}"> &l...
element UI框架使用el-calendar日历组件自定义内容
_NIXIAKF的博客
11-27 4453
效果图 找到了两种实现方式 第二种比较简单 所以就直接更新第二种了 templete部分： <el-calendar> <template slot="dateCell" slot-scope="{date, data}"> <p> <!--这里原本有动态绑定的class，去掉--> {{
vue 备忘录
TCorners博客
05-31 2018
用vue写了个日历备忘录的功能。省略了备忘录的增删改查功能。 直接上代码 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&am
在vue中使用elementui的el-popover组件，怎么修改他的高度
06-09
要修改 ElementUI 的 el-popover 组件的高度，您可以使用以下方式： 1. 通过设置插槽内容的高度来设置 el-popover 的高度。例如： ```html <el-popover> <p style="height: 100px;">这是一段内容</p> </el-popover> ``` 2. 通过设置 popover 的 `max-height` 样式来控制高度。例如： ```html <el-popover :popper-class="['my-popover']"> <p>这是一段内容</p> </el-popover> ``` ```css .my-popover .el-popover__popper { max-height: 200px; } ``` 在上面的代码中，我们通过设置 `popper-class` 属性来指定自定义类名 `my-popover`，然后通过该类名来设置 `max-height` 样式，从而控制 el-popover 的高度。 3. 使用 scoped 样式表来修改 el-popover 的样式。例如： ```html <template> <el-popover> <p>这是一段内容</p> </el-popover> </template> <style scoped> .el-popover__popper { max-height: 200px; } </style> ``` 在上面的代码中，我们使用 scoped 样式表来修改 el-popover 的样式，从而控制其高度。 以上是三种常见的修改 ElementUI el-popover 组件高度的方法，您可以根据实际需求选择适合您的方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值