ant design vue 表格查询项有一个非常让人头疼的问题就是时间问题了,时间的传值让前端也很苦恼,如下我整理了一些内容给大家,希望对大家的编码有所帮助
日期选择框之时间段range
<template>
<a-form-model ref="form" :model="form">
<a-row>
<a-col :span="8">
<a-form-model-item
:label="i18nTranslate('喜羊羊')"
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
>
<a-range-picker v-model="timeCreat" @change="onChangeTimeProject" size="default" format="YYYY-MM-DD" style="width:100%" />
</a-form-model-item>
</a-col>
</a-row>
</template>
<script>
// 用来时间格式的转换必须要引入
import moment from 'moment';
export default {
name: 'PaperList',
data() {
return {
moment,
formItemLayout: {
labelCol: { span: 6 },
wrapperCol: { span: 14 }
},
// 因为一般情况下期望得到的都是对象,所以我们要自己定义一个时间名字(随便定义)
// 这里定义的都是默认当天的时间段,格式是年月日
timeValue: [moment(this.getCurrentData(), 'YYYY-MM-DD'), moment(this.getCurrentData(), 'YYYY-MM-DD')],
form: {},
};
},
mounted() {
this.getlist();
}
methods:{
onChangeTime(date, dateString) {
// 让我们传的值等于我们所选的值
this.timeValue = date;
// 需求小技巧:此处为判断我们所选择的时间是否超过三个月,超过了三个月需要友好提醒
if (this.timeValue[0] && this.timeValue[1]) {
if (Math.abs(moment(this.timeValue[0]).diff(moment(this.timeValue[1]), 'days')) > 90) {
this.$message.info('时间跨度超过3个月,查询时间可能较长', 5);
}
}
},
/** 获取表格内容 */
getlist(record) {
let params = {
startDate: this.timeValue.length > 0 ? this.timeValue[0].format('YYYY-MM-DD') : '',
endDate: this.timeValue.length > 0 ? this.timeValue[1].format('YYYY-MM-DD') : '',
...record
};
你的接口(params).then(res => {
// 表格的数据来源
this.data = res.content;
this.loading = false;
});
},
// 获取当前时间方法
getCurrentData() {
return new Date().toLocaleDateString();
},
}