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

tainzhi 發(fā)布于2019-08-23 16:03 / 1290人閱讀

摘要：實現(xiàn)從后臺獲取數(shù)據(jù)，并賦值默認(rèn)值，同時也可以對選框進(jìn)行更改，即實現(xiàn)雙向綁定使用和方式實現(xiàn)雙向綁定，如下請選擇開始時間和結(jié)束時間獲取默認(rèn)時間將后臺傳回的默認(rèn)時間數(shù)據(jù)放在時間選擇框內(nèi)按照后臺傳回的數(shù)據(jù)，將斜杠前的時間作為初始時間按照

實現(xiàn)從后臺獲取數(shù)據(jù)，并賦值默認(rèn)值，同時也可以對選框進(jìn)行更改，即實現(xiàn)雙向綁定

1、使用value和on-change方式實現(xiàn)雙向綁定，html如下：

js：

data(){
    return{
        userGetInitTime: [], // 獲取默認(rèn)時間
    }
}
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;

        // 將后臺傳回的默認(rèn)時間數(shù)據(jù)放在時間選擇框內(nèi)
        let times = res.data.time.split("/");
        let sTime = times[0];  // 按照后臺傳回的數(shù)據(jù)，將斜杠前的時間作為初始時間
        let eTime = times[1]; // 按照后臺傳回的數(shù)據(jù)，將斜杠后的時間作為結(jié)束時間
        this.userGetInitTime = [new Date(sTime), new Date(eTime)]; // 以new Date()格式將時間放進(jìn)時間選框

      }).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實現(xiàn)雙向綁定：

html:

js:

 data() {
  return {
    domainGetInitTime: [],  // 存放后太回傳的默認(rèn)值
 }
},
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;  // 默認(rèn)初始化選項
    this.domainForm.domainChartSelect = res.data.graph_type[0].value;  // 默認(rèn)初始化選項
    // 將后臺傳回的默認(rèn)時間數(shù)據(jù)放在時間選擇框內(nèi)
    let times = res.data.time.split("/");
    let sTime = moment(times[0], "YYYY-MM-DD HH:mm:ss").toDate();  // 按照后臺傳回的數(shù)據(jù)，將斜杠前的時間作為初始時間
    let eTime = moment(times[1], "YYYY-MM-DD HH:mm:ss").toDate(); // 按照后臺傳回的數(shù)據(jù)，將斜杠后的時間作為結(jié)束時間
    this.domainGetInitTime = [sTime, eTime]; // 以new Date()格式將時間放進(jìn)時間選框
  }).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
        };

        // 根據(jù)參數(shù)獲取后臺的值
        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");
      }
    })
  },