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 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
使用javascript插入样式
Mar 14 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
JS使用for in有序获取对象数据
May 19 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
php导入导出excel实例
2013/10/25 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python反转序列的方法实例分析
2018/03/21 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
解决python replace函数替换无效问题
2020/01/18 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Python新手学习函数默认参数设置
2020/06/03 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
职工运动会感言
2014/02/07 职场文书
安全生产计划书
2014/05/04 职场文书
机动车交通事故协议书
2015/01/29 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers