完成从背景猎取数据，并赋值默许值，同时也可以对选框举行变动，即完成双向绑定

1、运用value和on-change体式格局完成双向绑定，html以下：

 <Date-picker
    :value="userGetInitTime"
    @on-change="handleDatesChange"
    :options="userOptions"
    confirm
    type="datetimerange"
    format="yyyy-MM-dd HH:mm:ss"
    placeholder="请挑选最先时候和完毕时候" style="width: 300px;">
</Date-picker>

js：

data(){
    return{
        userGetInitTime: [], // 猎取默许时候
    }
}
mounted(){
    this.$api.post(USERPORTRAIT1).then(res => {
        console.log(res.data)
        this.userList = res.data.data_type;
        // this.chartList = res.data.graph_type;

        this.userForm.userSelectModel = res.data.data_type[2].value;

        // 将背景传回的默许时候数据放在时候挑选框内
        let times = res.data.time.split('/');
        let sTime = times[0];  // 依据背景传回的数据，将斜杠前的时候作为初始时候
        let eTime = times[1]; // 依据背景传回的数据，将斜杠后的时候作为完毕时候
        this.userGetInitTime = [new Date(sTime), new Date(eTime)]; // 以new Date()花样将时候放进时候选框

      }).catch(res => {

      })
},
methods: {
  handleUserSubmit(){
    this.$refs.userForm.validate( valid => {
      if(valid){

        const data = {
          data_type: this.userForm.userSelectModel,
          time: this.userGetInitTime[0]+ '/' + this.userGetInitTime[1],
        };
        console.log('userGetInitTime',this.time)
        this.$api.post(USERPORTRAIT2, data).then(res => {
          this.userList = res.data.data_type;
          this.userImg = res.data.image;
        }).catch(res => {

        })
      }
    })
  },
  handleDatesChange(array){
    this.userGetInitTime = array;
    console.log(array);
  }
}

2、运用v-model完成双向绑定：

html:

 <Date-picker
    confirm
    v-model="domainGetInitTime"
    :options="getDatesOptions"
    type="datetimerange"
    format="yyyy-MM-dd HH:mm:ss"
    placeholder="请挑选最先时候和完毕时候" style="width: 300px">
 </Date-picker>

js:

 data() {
  return {
    domainGetInitTime: [],  // 寄存后太回传的默许值
 }
},
mounted() {
  this.$api.post(DOMAIN1).then(res => {
    console.log(res.data);
    this.domainImage = res.data.image;
    this.data_type = res.data.data_type;
    this.graph_type = res.data.graph_type;

    this.domainForm.domainSelect = res.data.data_type[2].value;  // 默许初始化选项
    this.domainForm.domainChartSelect = res.data.graph_type[0].value;  // 默许初始化选项
    // 将背景传回的默许时候数据放在时候挑选框内
    let times = res.data.time.split('/');
    let sTime = moment(times[0], 'YYYY-MM-DD HH:mm:ss').toDate();  // 依据背景传回的数据，将斜杠前的时候作为初始时候
    let eTime = moment(times[1], 'YYYY-MM-DD HH:mm:ss').toDate(); // 依据背景传回的数据，将斜杠后的时候作为完毕时候
    this.domainGetInitTime = [sTime, eTime]; // 以new Date()花样将时候放进时候选框
  }).catch(res => {
  });
},
methods: {
  // 向背景提交要求
  handleSubmit() {
    this.$refs.domainForm.validate(valid => {
      if (valid) {

        console.log("domainGetInitTime", this.domainGetInitTime)
        const data = {
          time: moment(this.domainGetInitTime[0]).format('YYYY-MM-DD HH:mm:ss')+'/'+moment(this.domainGetInitTime[1]).format('YYYY-MM-DD HH:mm:ss'),
          data_type: this.domainForm.domainSelect,
          graph_type: this.domainForm.domainChartSelect
        };

        // 依据参数猎取背景的值
        this.$api.post(DOMAIN2, data).then(res => {
          this.data_type = res.data.data_type;
          this.graph_type = res.data.graph_type;
          this.domainImage = res.data.domain_image
          console.log('0000'+res.data.domain_image);
        }).catch(res => {
          console.log(res)
        });
        this.$Message.success('Success');
      } else {
        this.$Message.error('failed');
      }
    })
  },