vue 开发过程中遇到的问题

 

1.为了防止自身组件的值影响到父组件

JSON.parse(JSON.stringify(this.multipleselection[0]))

vue 开发过程中遇到的问题_第1张图片

2.下拉框可过滤数据 filterable

vue 开发过程中遇到的问题_第2张图片

vue 开发过程中遇到的问题_第3张图片

 

3.表单重置 resetFields未定义报错问题

原因:click 弹出的时候$ref并没有获取到DOM元素导致的

解决:this.$neckTick(()=>{

this.$refs[form].resetFields();

})

vue 开发过程中遇到的问题_第4张图片

vue 开发过程中遇到的问题_第5张图片

vue 开发过程中遇到的问题_第6张图片

4.表格查询中checkbox框选中后,恢复到未选中状态

解决:重新调查询接口

 

5.vue导入文件,下载模板

 
      
        选取文件
      
      
    
data() {
    return {
      dialogUpload: false,
      fileList: [], //上传文件
      isLt2k: "", // 导入文件大小
      filePach: "",
      uploadUrl:
        (process.env.NODE_ENV === "production" ? prodUrl : devUrl) +
        API.STORE_INFO_IMPORT +
        "?access_token=" +
        this.$store.state.userInfo.userInfo.access_token,
      url:
        (process.env.NODE_ENV === "production" ? prodUrl : devUrl) +
        API.STORE_DOWENLOAD_ERRO
    };
  },

 

 // 校验上传文件的格式
    beforeUpload(file) {
      var FileExt = file.name.replace(/.+\./, "");
      if (["xlsx", "xsl"].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: "error",
          message: "请上传后缀名为xlsx、xsl的附件!"
        });
        this.cancelDialog();
        return false;
      }
      this.isLt2k = file.size / 1024 < 500 ? "1" : "0";
      if (this.isLt2k === "0") {
        this.$message({
          message: "上传文件大小不能超过500k!",
          type: "error"
        });
        this.cancelDialog();
      }
      return this.isLt2k === "1" ? true : false;
    },
 handleRemove(file, fileList) {
      //   console.log(file, fileList);
    },
    handlePreview(file) {
      //  console.log("1111111" + file);
    },
    handleAvatarSuccess(res) {
      //   console.log(res);
      this.loading.startLoading(); //打开遮罩
      this.loading.endLoading();
      if (res.code == "0") {
        // this.fileList = [];
        this.$emit("getData");
        this.$refs.upload.clearFiles();
        this.cancelDialog();
        this.$message({
          showClose: true,
          message: res.msg,
          type: "success"
        });
      } else if (res.code == "7000") {
        this.filePach = res.data.filePath;
        this.errow();
        this.cancelDialog();
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error"
        });
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error"
        });
        this.cancelDialog();
      }
    },
    // 导入失败下载异常文件
    errow() {
      //  console.log(this.filePach);
      window.location.href = encodeURI(
        this.url +
          "?" +
          "filePath=" +
          this.filePach +
          "&fileName=信息异常数据.zip" +
          "&access_token=" +
          this.$store.state.userInfo.userInfo.access_token
      );
    },
  //上传开始
    submitUpload() {
      if (this.$refs.upload.uploadFiles != 0) {
        this.$refs.upload.submit();
      } else {
        this.$message({
          message: "请选取上传文件",
          type: "error"
        });
      }
    },
 //关闭Dialog框
cancelDialog() {
      this.dialogUpload = false;
      this.fileList = [];
    },

 下载模板

vue 开发过程中遇到的问题_第7张图片

6.上传文件判断文件是否为空

vue 开发过程中遇到的问题_第8张图片

7.将后台返回的时间戳转换成日期格式在table表格中显示

// 将时间戳转换成日期
    getFullTime(date) {
      let now = new Date(date);
      let tyear = now.getFullYear();
      let tmonth = now.getMonth() + 1;
      let tday = now.getDate();
      let hours = now.getHours();
      let minutes = now.getMinutes();
      let seconds = now.getSeconds();
      if (tmonth < 10) {
        tmonth = "0" + tmonth;
      }
      if (tday < 10) {
        tday = "0" + tday;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      let time = `${tyear}-${tmonth}-${tday} ${hours}:${minutes}:${seconds}`;
      return time;
    },

// 调接口后循环表格数据后重新赋值
 if (0 == res.data.code) {
          this.tableData = res.data.data.list;
          this.page.total = res.data.data.total;
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].gmtCreate = this.getFullTime(
              this.tableData[i].gmtCreate
            );
          }
        }

8.新密码,确认密码

 
 

    
      
        
          
          
            
          
        
        
          
          
            
          
        
      
      
    


export default {
  name: "shop",
  data() {
    //密码
    let num = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
    let validatePassWord = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入密码"));
      }
      if (!num.test(value)) {
        return callback(new Error("请输入6-16位字母+数字"));
      } else {
        if (this.editPwd.passWordCheck !== "") {
          this.$refs.editPwd.validateField("passWordCheck");
        }
        callback();
      }
    };
    //密码确认
    var validatePassWordCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.editPwd.passWord) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
     };
  }
}

 return {
      editPwd: {
        passWord: "",
        passWordCheck: ""
      },
      dialogPwdEdit: false,
      passwordType: "password",
      passWordCheck: "password",
      // 必填项
      rules: {
        passWord: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassWord
          }
        ],
        passWordCheck: [
          {
            required: true,
            validator: validatePassWordCheck,
            trigger: "blur"
          }
        ]
      },
     }
 // JS部分
 //修改密码按钮
    editPassword() {
      if (1 == this.multipleSelection.length) {
        this.dialogPwdEdit = true;
      } else {
        this.$message({
          showClose: true,
          message: "请选择一条数据进行修改",
          type: "error"
        });
      }
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    showPwdCheck() {
      if (this.passWordCheck === "password") {
        this.passWordCheck = "";
      } else {
        this.passWordCheck = "password";
      }
      this.$nextTick(() => {
        this.$refs.passWordCheck.focus();
      });
    },
    //修改密码
    editPwdSure() {
      this.$refs["editPwd"].validate(valid => {
        if (valid) {
          let params = {
            userCode: this.multipleSelection[0].userCode,
            newPwd: this.editPwd.passWord
          };
          this.loading.startLoading();
          this.$axios.post(API.UPDATE_PWD_API, params).then(res => {
            this.loading.endLoading();
            if (0 == res.data.code) {
              this.getData();
              this.$message({
                showClose: true,
                message: "修改密码成功",
                type: "success"
              });
              this.cancelDialog();
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "error"
              });
            }
          });
        }
      });
    },
    //取消
    cancelDialog() {
      this.passwordType = "password";
      this.passWordCheck = "password";
      this.dialogPwdEdit = false;
      this.$refs["editPwd"].resetFields();
    },

 

你可能感兴趣的:(VUE)