• 写电子合同,爬过的坑,趟过的雷,犯过的错,都是泪


    第一个问题

    1.element组件多选(要求进入页面后全选,并能够给后端传值,多选项是后端字典)

      

                            <el-form-item>
                                <span>代理权限</span>
                                <el-checkbox-group v-model="item.proxiesPriv"
                                      @change="correSponding">
                                    <el-checkbox v-for="item in cities"
                                                checked
                                                :label="item.id"
                                                :key="item.id">
                                                {{item.content}}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
    

      

    我第一次犯得错,用checked来定义全选,导致修改回来他多选数组会变成true/false,传值导致一直报错,

                                <el-checkbox-group v-model="item.proxiesPriv"
                                      @change="correSponding"
                                      :true-label="item.proxiesPriv">
                                    <el-checkbox v-for="item in cities"
                                                :label="item.id"
                                                :key="item.id">
                                                {{item.content}}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
    

      第二次犯错,多选的v-model数组是空数组,会导致刚进入页面的时候会不是全选,这里我又犯了一个低级错误,把所有的值都放入数组中了,又导致了数组传值的时候又传了true和false

    正确的解决方法,用上面的方法,数组全选效果,用你当时调取字典的时候,push到空数组中(v-model中),就没有问题了

    第二个问题

    上传图片(两个列表页,在第一个列表页上传了一张图片,存到了state中,我的页面在mounted中有个数据渲染,是为了,页面修改回来的时候把state中的值渲染到页面中,我当时想的是,每一个列表(一份合同)对应的是一个合同id,在页面加载的时候,从新调取以下这个新的合同id,不就可以把图片进行修改和清除了吗?错误 代码如下)

          this.$store.dispatch("contract/contractNumber",this.serial)
            // 获取图片地址
            let {imgUrl} = api;
            // 往空数组里存放图片集合
            this.imgList = this.images.map(item=>{
              return {name:item.uid,url:`${imgUrl}${item.url}`}
            })
            // state里有图片的话直接渲染
            this.images && (this.from.imageId = this.images);
    

      开始看着没毛病啊,接口掉了,掉完后把state里的值进行替换,没毛病啊,后来试了下在调取接口上面把this.images给清空,发现一点用都没有,最后仔细一看,发现问题,这样写会不会是上面调取接口的时候,下面也同时走了,最后我给加了个.then没问题了

    // 获取合同id
          this.$store.dispatch("contract/contractNumber",this.serial).then(() =>{
            // 获取图片地址
            let {imgUrl} = api;
            // 往空数组里存放图片集合
            this.imgList = this.images.map(item=>{
              return {name:item.uid,url:`${imgUrl}${item.url}`}
            })
            // state里有图片的话直接渲染
            this.images && (this.from.imageId = this.images);
          })
    

      第三个问题

    表单验证这个应该都会吧,我这有这么一中情况,一个大表单,由于里面有好多块要动态添加的功能,动态添加不就需要考虑它的动态验证了吗,我这开始结构开始是分着的,由多个小表单组合成一个大表单,后来文件整合成一个了我当时就想组合成 一个了,就用了一个v-form就得了大体结构如下

    <v-form :mode = "A">
        <v-form-item :prop="'a.'+index+'.1'">
            <动态1 v-model="A.1"></动态1>
        </v-form-item>
        <v-form-item :prop="'b.'+index+'.1'">
            <动态2 v-model="B.1"></动态1>
        </v-form-item>
        <v-form-item :prop="'c.'+index+'.1'">
            <动态3 v-model="C.1"></动态1>
        </v-form-item>
    </v-form>
    
    data(){
      return{
         A:[]
         B:[]
        c:[]          
        }  
    }
    

      导致只有A能够动态进行验证,两种方法,一把data里的放到一个对象里,二写多个v-form,都能够实现动态验证

     第四个问题

    需求:复选框页面加载的时候默认全选,可修改

    开始的时候我是这样写的,看下有啥问题?????

    <el-form-item>
        <span>代理权限</span>
         <el-checkbox-group v-model="item.proxiesPriv"
                                      @change="correSponding"
                                      checked>
                <el-checkbox v-for="item in putcities"
                                     :label="item.id"
                                     :key="item.id">
                                     {{item.content}}
                 </el-checkbox>
           </el-checkbox-group>
    </el-form-item>
    

      看着没有问题吧!!!满足了页面加载的时候的全选功能,但是,这里有个问题,当你修改回来的时候,他会把返回回来的数组自动转换成true,和false,导致你的选择一直都试全部选中,或者全部不选,不信你可以试试。有啥解决办法呢??

      我就改成了下面的代码

    <el-form-item>
        <span>代理权限</span>
         <el-checkbox-group v-model="item.proxiesPriv"
                                      @change="correSponding"
                                     :true-label="item.proxiesPriv">
                <el-checkbox v-for="item in putcities"
                                     :label="item.id"
                                     :key="item.id">
                                     {{item.content}}
                 </el-checkbox>
           </el-checkbox-group>
    </el-form-item>
    

      把checked换成了true-label,element api上这样说的

      这样就不会转成true和false了,但是需要你手动去操作一个功能,那就是返回回来的的数据需要你自己去push到你的v-model中,如果你直接赋值的话,可能还会出现一点小bug,需要你获取回来的每一项,然后挨个放到v-model中这样所有的bug都不会有了

    第五个问题

    bug:vue+element的input当你触发回车的时候会跳转路由,页面上完全没有写回车事件

      今天有个这样一个问题,有一些组件我这里 一按回车自动的就跳转路由了,我在页面里找了一大圈,没找到有设置回车事件的啊,最后找到了问题所在,element api上写着呢

    只需要在form上加上@submit.native.prevent   就可以了

    第六个问题

    样式问题:flex布局用了display: flex;布局方式,但是页面样式宽度缩小时还是出现了塌陷问题问还需要添加什么属性,下面时原布局格式

    .denial {
          display: flex;
          height: 27px;
          line-height: 27px;
    }
    

      修改后的布局样式:flex-wrap: wrap;宽度不够时自动换行,不能设置死的高度,会出现页面塌陷问题。注:需要定高的一般都是最小级别的组件,像有好几个自己标签的能不定高就不定稿

    .denial {
          display: flex;
          flex-wrap: wrap;
    }
    

      第七个问题

    这个应该不能算是问题,应该算是警告!!!!

    你是否做过这样的事,一个组件里它方法里面有这么一个事件,它在开始页面加载的时候你是不是把你的v-model的值给放进去了当一个默认值,(这个v-mode因为他是动态的不知道它有多少个,他是后端来定下来的字典,字典有多少个你的v-model就有多少个),结果你把后端返给你的属性去当了你的v-model,因为这样你传给后端的这个属性的value值会直接绑定到这个属性上,你修改回来的话,他的值同样会跟着返回回来。感觉挺不错是吧!!

    但是这样的话你会出现一种很大的错误,因为你的新增和修改都在同属性上,你能够知道这事新增还是修改,但是代码上他是不知道的,会出现有时候你的值完全录入不进去的问题。

    解决办法

    1. 自己在data里定义你的v-mode属性,去用你的计算属性或者watch来进行监听判断是新增还是修改,这样不会导致值得冲突

    2.拆组件,弄出两个组件来,一个是修改得一个是新增的,当你路由跳转的时候,你就需要进行判断了

      第八个问题

    这个问题老牛逼了,困扰了我一天一夜,先不说啥问题,先说下我这当时的情况(工作流)

    我这在前端页面一个打印按钮,点击后触发打包里面的一个事件( window.parent.$printPage(href)),然后在你要打印的那个页里面去走接口,当所有接口走完后,会触发打印(静默打印)

    href的格式:https://dcontract.allhome.com.cn/#/Preview?id=${this.serial}&token=${token}

    this.serial:合同id
    token:需要走网关的一个值
    这是一个简单的一个流对吧,但是它死活的打印不出来,于是开始排查错误之旅
    从开始的排查打印功能,到排查页面渲染,到后台接口问题,到运维缓存,到打包工具,到页面数据的调取,来来回回的排查,每一块都排查了不下三次
    从本地,到测试,最后到线上直接排查,最后发现了问题,token值出现了错误(心里十万头羊驼奔过)
    为啥错呢,先看一下我以前的代码(token是可以直接在window中拿到)
    token内容:RgxqYyLHLdKtjbNB+QWiOu26AnxbMjmHpiwSe16ZVvxkUmlPInt0v155Ft1RyQQTuJf0xM/CTTYtHkOHMb2fYrcRZ5ZNur/+7IwwnAL0ZTwN4gjAP3R9hatMXDmc9SLm3O29uOPdw8RbheGsDTbK0ANfoQNEyp+THYEEgdSvVjpQEEIS0i/3hQOYYKFUU71prKnFQygRAmyr3BHZfR4lMWzFpnB8V/e9jH2VS8reh0lif6iX4Ulcix3YsO9Mkb+M/cxsEWDTnQHy8BQAhewi8yKA6JmE/Kmya8X3vQwfcLGcHwuIQTHx4W1aXqHVKFaalKsEAxF9FAreVXWqbr5kzw==
    print () {
          //打印页面需要token
          let token = window.token;
          let href = ''
          //loading
          this.printing = true;
          switch(process.env.NODE_ENV) {
            case 'development': 
            case 'lan':
            href = `${location.origin}/#/Preview?id=${this.serial}&token=${token}`;
            break;
            case 'pred': 
            href = `https://dcontract.allhome.com.cn/#/Preview?id=${this.serial}&token=${token}`;
            break;
            case 'production':
            href = `https://contract.allhome.com.cn/#/Preview?id=${this.serial}&token=${token}`;
            break;
          }
    
          //调用静默打印
          // window.open(href, '_blank')
          window.parent.$printPage(href)
        },
    

      不知道有没有发现问题的

    直接说问题把,大家看到上面的token内容了吧,它里面有一对特殊字符,有没有思路

    结论:在url中,有些特殊字符会自动转为空值,导致你在url中取内容的时候,token其实一直都是不对的,所以我那里一直打印不成功

    javascript中的特殊字符如下:
    ’ 单引号
    ” 双引号
    & 和号
    反斜杠
    换行符
    回车符
    制表符
     退格符
    f 换页符
    url中的特殊字符如下:
    + 表示空格(在 URL 中不能使用空格)        
    / 分隔目录和子目录        /
    ? 分隔实际的 URL 和参数       ?
    % 指定特殊字符       %
    <#表示书签#>
    & URL 中指定的参数间的分隔符       &

    最后只能在获取token的时候把字符进行了转码

    let token = encodeURIComponent(window.token); // token转码
    let token = decodeURIComponent(this.$route.query.token) // token解码
    说白了就是这么简单。。。。。。
      第九个问题
    大家都应该知道锚点吧,在一些项目中,左侧导航中可以直接用锚点定位,来让页面快速的到达指定位置
    但是锚点定位有一个问题,那就是使用锚点定位的时候会改变你的路由,会把你的锚点值直接放到路由上,会让你想在一个页面上操作东西的想法不成立
    我这的解决办法:在页面加上这个事件(当next里面为false的时候他不会跳转路由)
    beforeRouteLeave(to, from, next) {
        let { path } = to;
        if (
          path == "/Contract/div3" ||
          path == "/Contract/div1" ||
          path == "/Contract/div2" ||
          path == "/Contract/div4" ||
          path == "/Contract/div5" ||
          path == "/Contract/div6" ||
          path == "/Contract/div7" ||
          path == "/Contract/div8"
        ) {
          next(false);
        } else {
          next();
        }
      },
    

      在router.js上加上如下方法

    router.beforeEach((to,from,next)=>{
      // 路径
      let {path} = to;
      // 默认跳到统计页面
      path == '/' && next('/Statistics')
      next()
    })
    

      

  • 相关阅读:
    散列算法
    【转】认证 (authentication) 和授权 (authorization) 的区别
    Filter和interceptor比较
    【转】深入理解Spring的两大特征(IOC和AOP)
    [转]web.xml中servlet ,filter ,listener ,interceptor的作用与区别
    线程同步
    Java容器
    进程间交互的几种方式
    JSP和Servlet的区别
    IPC介绍
  • 原文地址:https://www.cnblogs.com/yishifuping/p/11107621.html
Copyright © 2020-2023  润新知