vue 开发过程中遇到的问题

最新推荐文章于 2025-03-12 10:05:52 发布

原创最新推荐文章于 2025-03-12 10:05:52 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

9 篇文章

订阅专栏

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

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

2.下拉框可过滤数据 filterable

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

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

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

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

})

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

解决：重新调查询接口

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

 <el-dialog
      width="52%"
      title="信息导入"
      :visible.sync="dialogUpload"
      :close-on-click-modal="false"
    >
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="uploadUrl"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleAvatarSuccess"
        :limit="1"
        :file-list="fileList"
        :auto-upload="false"
        :before-upload="beforeUpload"
      >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpload()">确 定</el-button>
        <el-button @click="cancelDialog()">取 消</el-button>
      </div>
    </el-dialog>

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 = [];
    },

下载模板

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

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.新密码，确认密码

 <!-- 修改密码 -->
 <!-- HTML-->

    <el-dialog
      title="修改密码"
      :visible.sync="dialogPwdEdit"
      width="30%"
      :close-on-click-modal="false"
      :before-close="cancelDialog"
    >
      <el-form
        :model="editPwd"
        :rules="rules"
        ref="editPwd"
        label-width="100px"
        label-position="right"
        class="changePassword"
      >
        <el-form-item label="新密码" prop="passWord">
          <el-input ref="password" :type="passwordType" v-model="editPwd.passWord"></el-input>
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
          </span>
        </el-form-item>
        <el-form-item label="确认密码" prop="passWordCheck">
          <el-input ref="passWordCheck" :type="passWordCheck" v-model="editPwd.passWordCheck"></el-input>
          <span class="show-pwd" @click="showPwdCheck">
            <svg-icon :icon-class="passWordCheck === 'password' ? 'eye' : 'eye-open'"/>
          </span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog()">取 消</el-button>
        <el-button type="primary" @click="editPwdSure()">确 定</el-button>
      </div>
    </el-dialog>


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