第一个问题
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}
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的时候把字符进行了转码
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()
})