vue实现日历表格(element-ui)


Posted in Javascript onSeptember 24, 2020

本文实例为大家分享了vue实现日历表格的具体代码,供大家参考,具体内容如下

效果如图:

vue实现日历表格(element-ui)

html:后面的日期是循环出来的

<div class="calendar-title">
  <span class="calendar-left" @click="lastDateclick"><</span>
  <span class="calendar-center">近期事件</span>
  <span class="calendar-right" @click="nextDateclick">></span>
</div>
<el-table ref="table"t :data="filterData" border stripe>
  <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
  <el-table-column align="center" prop="code" label="代码">
  </el-table-column>
  <el-table-column align="center" prop="name" label="名称"></el-table-column>
  <el-table-column align="center" v-for="(item,index) in dateArr" :key="index + item" :label="item">
   <template slot-scope="scope">
   <span v-html="dateInfoDesc(item,scope.row)"></span>
   </template>
  </el-table-column>
</el-table>

这里注意一下:key="index + item" ,之前我的key设置的只等于index,然后到了后面数据删选的时候就各种出错,找了半天,才发现是key值不唯一导致的!!

data:

bondList: [], // 获取到数据组
leftDate: "",
rightDate: "",
TempleftDate: "",
TemprightDate: "",
dateArr: []

js:

computed: {
 // 监听数据的日期满足条件,则显示该数据
 filterData() {
  var tableData = new Array();
  var _this = this;
  this.dataList.filter(item => {
  if (
   _this.dateArr.includes(item.startDate) ||
   _this.dateArr.includes(item.endDate) ||
   _this.dateArr.includes(item.refundDate)
  ) {
   tableData.push(item);
  } else {
   return;
  }
  });
  return tableData;
 }
},
 methods: {
 // 显示该数据在当前日期对应的描述内容
 dateInfoDesc(date, row) {
  var msg = "";
  if (row.startDate == date) {
  msg = "起始日";
  } else if (row.endDate == date) {
  msg = "结束日";
  } else if (row.otherDate == date) {
  msg = "其他";
  }
  return msg;
 },
 
 // 获取数据
 getDataList() {
  this.$axios.post(url).then(res => {
  this.dataList = res.data.data.rows;
  });
 },
 
 // 获取日期数据,返回的全是日期
 getDateList() {
  var params = new URLSearchParams();
  params.append("leftDate", this.leftDate);
  params.append("rightDate", this.rightDate);
  this.$axios({
  method: "post",
  url: `url2`,
  params: params
  }).then(res => {
  this.dateArr = res.data.data; //日期数据
  this.TempleftDate = this.dateArr[0]; // 该区间日期第一位
  this.TemprightDate = this.dateArr[this.dateArr.length - 1]; // 该区间日期最后一位
  this.leftDate = [];
  this.rightDate = [];
  });
 },
 
 // 上一区间的日期
 lastDateclick() {
  this.leftDate = this.TempleftDate;
  this.getDateList();
 },
 
 // 下一区间的日期
 nextDateclick() {
  this.rightDate = this.TemprightDate;
  this.getDateList();
 },
 
}

有问题留言哈,希望能带给你帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
jQuery插件制作的实例教程
May 16 Javascript
jquery自适应布局的简单实例
May 28 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 #Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 #Javascript
vue-router 控制路由权限的实现
Sep 24 #Javascript
vue+elementUI实现简单日历功能
Sep 24 #Javascript
JavaScript获取时区实现过程解析
Sep 24 #Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 #Javascript
原生js实现购物车功能
Sep 23 #Javascript
You might like
PHP遍历二维数组的代码
2011/04/22 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
参观考察邀请函范文
2014/01/29 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js