本文实例为大家分享了vue实现日历表格的具体代码，供大家参考，具体内容如下效果如图：html：后面的日期是循环出来的

































这里注意一下:key="index + item" ，之前我的key设置的只等于index，然后到了后面数据删选的时候就各种出错，找了半天，才发现是key值不唯一导致的！！key="index + item" key值不唯一key值不唯一data:
bondList: [], // 获取到数据组
leftDate: "",
rightDate: "",
TempleftDate: "",
TemprightDate: "",
dateArr: []
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();
},

}
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();
},

}有问题留言哈，希望能带给你帮助。以上就是本文的全部内容，希望对大家的学习有所帮助。