vue+iview之select和時間日期的使用

實現從後臺獲取數據，並賦值默認值，同時也能夠對選框進行更改，即實現雙向綁定

一、使用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);
  }
}

二、使用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');
      }
    })
  },