本文实例为大家分享了vue实现日历表格的具体代码,供大家参考,具体内容如下
效果如图:
html:后面的日期是循环出来的
& lt; div类=癱alendar-title”比;
& lt;跨类=癱alendar-left @click”=發astDateclick”祝辞,lt; & lt;/span>
& lt;跨类=" calendar-center "在近期事件& lt;/span>
& lt;跨类=癱alendar-right @click”=皀extDateclick”在祝辞& lt;/span>
& lt;/div>
& lt; el-table ref="表" t: data=" https://www.yisu.com/zixun/filterData "边境stripe>
& lt; el-table-column对齐="中心" type="指数"宽度=?0”标签=靶颉焙旁? lt;/el-table-column>
& lt; el-table-column对齐="中心"道具=按搿北昵?按搿北?
& lt;/el-table-column>
& lt; el-table-column对齐="中心"道具=懊帧北昵?懊啤白４? lt;/el-table-column>
& lt; el-table-column对齐="中心")=?项目、索引)dateArr”:关键=爸甘?项目”:标签=拔锲贰北?
& lt;模板slot-scope=胺段А北?
& lt;跨度v-html=" dateInfoDesc(项目,scope.row)”祝辞& lt;/span>
& lt;/template>
& lt;/el-table-column>
& lt;/el-table>
这里注意一下:,之前我的关键设置的只等于指数,然后到了后面数据删选的时候就各种出的错,找了半天,才发现是导致的! !
数据:
bondList:[],//获取到数据组
leftDate:“”,
rightDate:“”,
TempleftDate:“”,
TemprightDate:“”,
dateArr: []
js:
计算:{//监听数据的日期满足条件,则显示该数据
filterData () {
var tableData=https://www.yisu.com/zixun/new数组();
var _this=;
this.dataList。过滤器(=>{项
如果(
_this.dateArr.includes (item.startDate) | |
_this.dateArr.includes (item.endDate) | |
_this.dateArr.includes (item.refundDate)
){
tableData.push(项);
其他}{
返回;
}
}）；
返回tableData;
}
}，
方法:{//显示该数据在当前日期对应的描述内容
dateInfoDesc(日期、行){
var味精=" ";
如果行。startDate可以==日期){
味精="起始日”;
}如果(行。endDate==日期){
味精="结束日”;
}如果(行。otherDate==日期){
味精="其他”;
}
返回味精;
}，//获取数据
getDataList () {
美元。axios.post (url)。然后(res=比;{
这一点。dataList=res.data.data.rows;
}）；
}，//获取日期数据,返回的全是日期
getDateList () {
var params=new URLSearchParams ();
参数个数。追加(“leftDate”, this.leftDate);
参数个数。追加(“rightDate”, this.rightDate);
美元。axios ({
方法:“文章”,
url:“url2”,
参数:参数
})。然后(res=比;{
这一点。dateArr=res.data.data;//日期数据
这一点。TempleftDate=this.dateArr [0];//该区间日期第一位
这一点。TemprightDate=this.dateArr [this.dateArr。长度- 1];//该区间日期最后一位
这一点。leftDate=[];
这一点。rightDate=[];
}）；
}，//上一区间的日期
lastDateclick () {
这一点。leftDate=this.TempleftDate;
this.getDateList ();
}，//下一区间的日期
nextDateclick () {
这一点。rightDate=this.TemprightDate;
this.getDateList ();
}，
}
有问题留言哈,希望能带给你帮助。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
