vue.js - 使用element-ui的dialog弹出框组件，弹出框里是一个表单，表单里的日期选择器出现无法显示用户选择的日期。

问题描述

问 题

vue项目使用element-ui的dialog弹出框组件，弹出框里是一个表单，效果如下：

现在的问题是：选择日期之后选中的日期无法显示在输入框中。而且情况是这样的，每次刷新页面之后第一次选择这个到期时间是可以显示在输入框里的，但是第二次开始就又不能显示了！
试过很多改法都不成功，难道是在dialog里面不能正常使用？请大神指导！谢谢
代码截图和源码在下方
!

<el-button type="primary" icon="plus" @click="newDialogVisible = true">新增账号</el-button>

       <el-dialog title="新增账号" v-model="newDialogVisible"  @close="resetForm1('newForm')">
        <el-form :model="newForm"  :rules="rules1" ref="newForm" :label-width="formLabelWidth">
          <el-form-item label="厂家名称" prop="nickName">
            <el-input v-model="newForm.nickName" auto-complete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="userAccount">
            <el-input v-model="newForm.userAccount" @blur="checkName" auto-complete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="userPasswd">
            <el-input v-model="newForm.userPasswd" auto-complete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="实体店最大数量"prop="maxNumber">
            <el-input v-model="newForm.maxNumber" auto-complete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="到期时间" prop="useTime">
              <el-date-picker
                v-model="newForm.useTime"
                format="yyyy-MM-dd"
                style="width:70%;"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="newForm.remark" auto-complete="off" style="width:70%;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addAcount('newForm')">保 存</el-button>
          <el-button @click="resetForm1('newForm')">取 消</el-button>
        </div>
      </el-dialog>

//添加（js部分）

addAcount:function(formName){
 let that = this
 that.$refs[formName].validate((valid) => {
      if (valid) {
          that.$http.post(config.URL+'platform/user/add',
          {},
          {
          params:{
             username:that.newForm.userAccount,
             password:that.newForm.userPasswd,
             nickname:that.newForm.nickName,
             freeTime:that.newForm.useTime,
             maxNumber:that.newForm.maxNumber,
             remark:that.newForm.remark
           },
           emulateJSON:true
         })
        .then(
        function(res){
          if (res.body.code==0) {
            that.show();
            that.newForm ={};
            that.newDialogVisible = false
          }
          else{
            Message.error(res.body.statusMsg);
          }
        },
        function(err){
            Message.error('与服务器连接错误！');             
        }) 
      } else {
        console.log('error submit!!');
        return false;
      }
    });

},

解决方案

在点击datapicker之后，可以先看看newForm.useTime这个数据是否正常？看看是否是watch/computed属性中有对useTime这个值进行更改？
试试把

 if (res.body.code==0) {
            that.show();
            that.newForm ={};
            that.newDialogVisible = false
          }

改成如下形式

 if (res.body.code==0) {
            that.show();
            that.$refs[newForm].resetFields();
            that.newDialogVisible = false
          }

这篇关于vue.js - 使用element-ui的dialog弹出框组件，弹出框里是一个表单，表单里的日期选择器出现无法显示用户选择的日期。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！