<el-date-picker
v-model="tabData.chooseDate"
type="daterange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
clearable
value-format="yyyy-MM-dd"
style="width: 100%;"
@change="changeChooseDate"
v-else
>
</el-date-picker>
这里给他双向绑定一个数据,是tabData里的chooseDate以及开始时间businessStartDate和结束时间businessEndDate
data(){
return{
tabData:{
businessStartDate:[],//开始时间
businessEndtDate:[],//结束时间
chooseDate:[]
}
}
}
我们定义并监听一下change事件"changeChooseDate"
methods:{
changeChooseDate(date) {
//这里给开始时间和结束时间动态赋值
this.tabData.businessStartDate = date[0];
this.tabData.businessEndDate = date[1];
},
}
还需要在页面刷新的时候定义一下,也就是你调用接口获取列表数据的时候,需要有一步操作
//获取列表数据
getCharterList() {
//调用接口
getCharterInfo().then(res => {
if (res.data.code == 0) {
//获取数据
let data = res.data.data;
this.tabData = data;
//给chooseDate赋值
this.$set(this.tabData, "chooseDate", [
data.businessStartDate,
data.businessEndDate
]);
if (data.businessStartDate !== null || data.businessEndDate !== null) {
this.tabData.businesstDate = data.businessStartDate + " ~ " +
data.businessEndDate;
}
}
});
},
这样基本上就可以了