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兼容性测试实例
Jul 01 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 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/06/09 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
yii添删改查实例
2015/11/16 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
vue 2.0封装model组件的方法
2017/08/03 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
python比较2个xml内容的方法
2015/05/11 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
python实现交并比IOU教程
2020/04/16 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
计算机网络毕业生自荐信
2013/10/01 职场文书
安全检查验收制度
2014/01/12 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
比赛口号大全
2014/06/10 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
高三英语教学计划
2015/01/23 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书