前言

前言：最近做个酒店管理系统，需要点击日历选择日期查询当天的酒店起价，这时我才用了element的日历（结合了element的对话框）。
功能需求：点击价格日历打开日历对话框，点击日期更新酒店起价并关闭对话框，点击下个月，上个月以及今天只是更新日历而不关闭对话框和请求新起价。

此过程我一路探索，都找不到比较好的办法，就只能退而求次，这里我才用的是给日历中的tbody元素添加点击事件，有兴趣可以看后面我其中想到的一些办法，只是我没实现出来。

解决办法

给日历中的`tbody`元素添加点击事件：

代码：
日历：

<el-dialog title="价格日历" :visible.sync="dialogTableVisible">      //dialogTableVisible控制是否打开日历对话框<el-calendar v-model="priceTime">   //日历时间数据保存在priceTime中</el-calendar></el-dialog>

点击打开日历对话框事件代码：

//打开价格日历
openDate(){this.dialogTableVisible = true            //打开日历对话框this.$nextTick(() => {                      //给点击日历绑定绑定监听事件,效果：只有点击日期才去请求新价格并关闭弹窗，点击下个月，上个月等等不变化console.log('aaa')var prevBtn = document.querySelector('tbody')        //给tbody添加事件，也就是日期那部分prevBtn.addEventListener('click',() => {this.dialogTableVisible = false                 //点击关闭日历对话框this.reqHotelPrice()                             //请求新的酒店起价})})
},

其他思路

watch监听日历绑定数据变化实现更新数据：

watch: {priceTime(newval,oldval){this.dialogTableVisible = falsethis.reqHotelPrice()}
},

虽然每次在日历选择日期都会触发关闭日历对话框和查询新的酒店起价。
我无法解决的地方：点击按钮上个月，下个月，今天等都会触发日历数据更新从而触发关闭日历对话框和查询新的酒店起价，这给用户的体验不好。

给上个月，下个月，今天三个按钮添加点击事件：

通过属性选择器给这三个按钮添加点击事件（给当月的日期添加点击关闭日历对话框并请求新的起价），我虽然可以给三个按钮添加点击事件，但在该点击事件中给当月日期添加点击关闭日历对话框并请求新的起价事件不起作用。

this.$nextTick(() => {// 点击上个月let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');prevBtn1.addEventListener('click',() => {consolo.log('上个月');})// 点击今天let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');prevBtn2.addEventListener('click',() => {consolo.log('今天');})// 点击下个月let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');prevBtn3.addEventListener('click',() => {consolo.log('下个月');})
})

Element日历区分上个月下个月等按钮和日期点击事件相关推荐

jQuery动态添加按钮，绑定点击事件失效
jQuery动态添加按钮,绑定点击事件失效因为需求需要给页面动态添加按钮并绑定点击事件进行操作, 但是发现绑定的点击事件失效. 原因分析: append中的节点是在整个文档加载完之后开始添加,因此页 ...
更简单的方法实现el-calendar日历组件中点击上个月、今天、下个月按钮时的点击事件
网上查el-calendar相关的按钮点击事件文章,清一色都是在mounted挂载阶段通过document.querySelector绑定类名添加点击事件. 我想说为啥要弄得这么麻烦?el-calen ...
IOS开发UISearchBar失去第一响应者身份后，取消按钮不执行点击事件的问题
在iOS开发中,使用UISearchBar的时候,当搜索框失去焦点的时候,取消按钮是默认不能点击的,如图按钮的颜色是灰色的: 这是因为此时取消按钮的enabled属性被设置为NO了,那么当我们需 ...
datatables 自定义按钮及响应点击事件
按钮 {"targets": -1,"class": "but_xq","data": null,"bSort ...
javascript动态生成按钮并绑定点击事件
前一个多月公司的前端开发人员离职,公司一直在招前端,基本上每天都有几个来面试的人,就这个面试频率,也才招了一个多月才招到.绝大部分都是死在了一道上机面试提上.题目很基础,但也很考基本功,基本上才3%左 ...
android按钮防止重复点击事件,实例详解Android解决按钮重复点击问题
为了防止用户或者测试MM疯狂的点击某个button,写个方法防止按钮连续点击.具体实例代码如下所示: public class BaseActivity extends Activity { prot ...
pyqt按钮带参数点击事件
1.使用lambda修饰符,连接信号 self.pushButton.clicked.connect(lambda:self.buttonClicked(1,1)) 2.穿入什么参数都可以 def b ...
element 控件 tabel中增加el-switch 并绑定点击事件
先看官网 <el-switchv-model="value"active-color="#13ce66"inactive-color="#ff4 ...
element 日历组件应用相关的问题
1.使用element日历组件会自带按钮组,要实现切换时间的时候去获取相关月份的排班数据,但是按钮组并不存在于日历组件中 <el-calendar v-model="value&quo ...

Element日历区分上个月下个月等按钮和日期点击事件

文章目录

前言

解决办法

给日历中的`tbody`元素添加点击事件：

其他思路

watch监听日历绑定数据变化实现更新数据：

给上个月，下个月，今天三个按钮添加点击事件：

Element日历区分上个月下个月等按钮和日期点击事件相关推荐

最新文章

热门文章

Element日历区分上个月下个月等按钮和日期点击事件

文章目录

前言

解决办法

给日历中的tbody元素添加点击事件：

其他思路

watch监听日历绑定数据变化实现更新数据：

给上个月，下个月，今天三个按钮添加点击事件：

Element日历区分上个月下个月等按钮和日期点击事件相关推荐

最新文章

热门文章

给日历中的`tbody`元素添加点击事件：