近期Vue+ElementUI踩坑总结

SeLiNnnn
3,809 阅读2分钟

1.Dialog->Form->el-input无法输入内容

  • 问题描述：进行编辑操作时，获取到了数据，但输入框无法输入内容。

  • 问题原因：疑似嵌套太深，vue无法刷新视图

  • 解决方案：

<el-input
    v-model.number="number"
    placeholder="请输入数字"
    @input="forceInput"
 ></el-input>
 
 ...
 
 methods:{
     forceInput(){
         this.$forceUpdate();//强制刷新视图，每一个无法输入的input框都需要使用该方法
     }
 }

2.this.$refs获取为空/无法重置表单数据

  • 问题描述：在使用el-uplaod和el-form时，需要用到element提供的重置数据的方法，但都无法获取该dom或重置数据失败。

  • 问题原因：

    1.存在逻辑判断是否显示该元素，ref不是双向绑定的，故而节点没有渲染，所以获取为空。

    2.数据在created时已被赋值（例如：在编辑操作时，需要打开form表单并对输入框赋值，那么赋值动作就是在created的时候进行的），即使执行this.$refs.form.resetField()的方法，也不会重置表单数据

  • 解决方案：利用this.$nextTick()将赋值操作放到dom渲染结束之后再进行，之后再在关闭dialog的时候使用@close重置表单数据即可。

 this.$nextTick(() => {
    this.updateInfoForm.infoName = item.name;
    this.updateInfoForm.infoEmail = item.email;
});

3.取消el-upload上传/显示动画

  • 问题描述：绑定:file-list显示图片时，即使没有图片也会出现动画。
  • 解决方案：取消动画样式即可，这样就能愉快使用图片预览/下载等功能。
.el-upload-list__item {
  transition: none !important;
}

4.el-date-picker起止日期显示

  • 问题描述：起止日期选择后是一个数组，而后端是分别返回的开始和截止日期，需要对数据进行处理。
  • 问题原因：处理不当导致日期无法在选择器中显示。
后端返回:
startTime:2020-01-05
endTime:2020-02-03

赋值写法:
Date[0] = startTime;
Date[1] = endTime;

选择器显示结果:确实赋值成功，但无法显示

  • 解决方案：
Date = [startTime, endTime];

选择器显示结果：日期显示成功

5.Vue项目配合nginx部署上线后，刷新出现404页面

  • 问题描述：router使用history模式，部署刷新后找不到路由，直接404
  • 解决方案：

1、将history模式去除。

2、在nginx中配置当找不到静态路径时链接到index.html页面。

  • 主要记录方案2 nginx配置如下
server{
    listen 8081;
    server_name www.xxx.com:8081;
    root /data/xxx;
     index index.html;
       //主要是以下内容
         location / {
             try_files $uri $uri/ @router;
             index index.html;
         }
        location @router {
            rewrite ^.*$ /index.html last;
        }
}

特别说明

这样配置以后，如果访问的路由确实不存在，需要在vue-router(router/index.js)中去设置404页面，ngxin中就无需再配置了。

{
    path: "*", // 此处需特别注意至于最底部
    redirect: "/NotFound"
 }

6.el-form自动触发校验并显示样式

  • 问题描述：刚打开表单时，会出现有些输入框校验后显示验证成功样式，有些不显示。

  • 解决方案：

1.先添加一些验证成功后的的样式。

.el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus { border-color:#67C23A } .el-form-item.is-success .el-input-group__append .el-input__inner, .el-form-item.is-success .el-input-group__prepend .el-input__inner { border-color:transparent } .el-form-item.is-success .el-input__validateIcon { color:#67C23A }

2.修改验证规则里的触发方式,必须都写成trigger: ["blur", "change"]

修改完成后的效果如下：打开表单就会自动触发校验。

特别说明：如果该页面上存在其他的bug 可能也会导致无法自动触发校验。其次，如果本身required:false不是必填项，也无法触发自动校验

7.el-upload组件，上传/移除成功后，在表单中的校验提示不会更新。

  • 解决方案：在el-upload的钩子函数(on-success,on-remove)中，对图片数据单独校验一次。
this.$refs["formName"].validateField("imgName");

7.vue组件name不能重复

重复命名将会报错Error in nextTick: "RangeError: Maximum call stack size exceeded"，修改name即可

...持续更新中。

avatar
文章
阅读
粉丝