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 easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 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 文件上传代码(限制jpg文件)
2010/01/05 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php获取文件大小的方法
2014/02/26 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP可变变量学习小结
2015/11/29 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
jQuery代码优化 选择符篇
2011/11/01 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
angularjs 页面自适应高度的方法
2018/01/17 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
python MySQLdb使用教程详解
2018/03/20 Python
python openpyxl使用方法详解
2019/07/18 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
机电系毕业生求职信
2014/07/11 职场文书
工程部文员岗位职责
2015/02/04 职场文书
《所见》教学反思
2016/02/23 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
用python实现监控视频人数统计
2021/05/21 Python
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
MySQL数据库之存储过程 procedure
2022/06/16 MySQL