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高亮效果的二种实现方法
Sep 14 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
vue中实现高德定位功能
Dec 03 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 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面向对象分析设计的经验原则
2008/09/20 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
php计算整个目录大小的方法
2015/06/19 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
AJAX的使用方法详解
2017/04/29 PHP
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
Python 装饰器深入理解
2017/03/16 Python
python实现图片文件批量重命名
2020/03/23 Python
python 提取文件指定列的方法示例
2019/08/07 Python
Python socket聊天脚本代码实例
2020/01/02 Python
如何卸载python插件
2020/07/08 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Python jieba库分词模式实例用法
2021/01/13 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
如何撰写促销方案?
2019/07/05 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
java设计模式--建造者模式详解
2021/07/21 Java/Android