vue+iview之select和时间日期的使用

tainzhi 发布于2019-08-23 16:03 / 1263人阅读

摘要：实现从后台获取数据，并赋值默认值，同时也可以对选框进行更改，即实现双向绑定使用和方式实现双向绑定，如下请选择开始时间和结束时间获取默认时间将后台传回的默认时间数据放在时间选择框内按照后台传回的数据，将斜杠前的时间作为初始时间按照

实现从后台获取数据，并赋值默认值，同时也可以对选框进行更改，即实现双向绑定

1、使用value和on-change方式实现双向绑定，html如下：

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:

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102662.html

vue+iview 实现可编辑表格

摘要：先简单说明一下这个引入的的方式是标签引入的没有用到之类的构建工具毕竟公司还在用这也是我第一次写文章大家看看思路就行了要是有大佬指点指点就更好了话不多说先来个效果图我们再看下极为简单的目录结构实现的可编辑表格首页首页相关与业务无关的纯工具函数先简单说明一下,这个Demo引入的vue,iview的方式是标签引入的,没有用到webpack之类的构建工具...毕竟公司还在用angularjs...

Anleb 2019-08-23 12:37 评论0 收藏0
vue动态生成表单组件vue-form-maker

摘要：项目地址简介动态生成表单组件可以根据数据配置表单使用的库是在里一般要用到什么组件或数据都得提前声明所以要根据数据来生成表单只能使用的函数要做这一个组件其实并不难看一下官方示例再找个组件库差不多就能写出来如果对项目有兴趣可以或克隆项目自行研究项目地址简介 Vue动态生成表单组件可以根据数据配置表单使用的UI库是iView 在Vue里一般要用到什么组件或数据都得提前声明所以要根...

cjie 2019-08-23 14:16 评论0 收藏0
iView 发布 3.0 版本，以及开发者社区等 5 款新产品

摘要：相对时间组件锚点组件面板分割组件分割线组件单元格组件相对时间组件用于表示几分钟前几小时前等相对于此时此刻的时间描述。单元格组件在手机上比较常见，在上则常用于固定的侧边菜单项。开发者社区这是发布会最劲爆的一款产品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我们成功地召开了 iView 3...

FreeZinG 2019-08-23 10:31 评论0 收藏0
iview表单验证的问题

摘要：最近在做项目的时候，关于表单验证总会遇见一些奇奇怪怪的问题，下面把表单验证的步骤和表单验证常见的问题梳理下，避免以后开发中掉坑。进行表单验证时间日期验证失败的问题我下拉框一样，日期的类型是类型，所以需要额外设置类型。最近在做项目的时候，关于表单验证总会遇见一些奇奇怪怪的问题，下面把表单验证的步骤和表单验证常见的问题梳理下，避免以后开发中掉坑。表单验证的步骤第一步：给Form设置属...

MycLambert 2019-08-23 12:10 评论0 收藏0