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 相关文章推荐
jquery ready()的几种实现方法小结
Jun 18 Javascript
jquery中动态效果小结
Dec 16 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
Javascript闭包实例详解
Nov 29 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
从零开始用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乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
php实现读取超大文件的方法
2014/07/28 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
理解Javascript_10_对象模型
2010/10/16 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python 数据结构之队列的实现
2017/01/22 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
selenium如何定位span元素的实现
2021/01/13 Python
软件测试企业面试试卷
2016/07/13 面试题
十岁生日家长答谢词
2014/01/17 职场文书
新教师培训方案
2014/06/08 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
领导工作表现评语
2015/01/04 职场文书
重阳节主题班会
2015/08/17 职场文书
Python List remove()实例用法详解
2021/08/02 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android