Element 日期选择器 同时为后端提供开始时间和结束时间

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

这样基本上就可以了