vue 遇坑
二次封装过程中，使用emit失效的问题
几经查验之后，发现，是因为emit恢复正常。
ps：后续还出现其他问题。检查之后发现是触发了两次页码初始化，导致页码不变，所以对页码进行监控，一旦变化 就把页码赋值
事件绑定
在vue项目中 有可能会出现：同一个页面中会有多个echarts内容 并且 在echarts中 需要用户在缩放页面的时候图表同时也能随之缩放 那么就需要添加resize事件，
一般来说 会这样设置：
window.onresize = () = >{} 但是如果是多个事件 就会导致 后面的事件覆盖前面的事件
所以 就可以如下设置：
mounted (){
window.addEventListener('resize', () => this.weekCwTrend.resize(), false);
}
使用addEventListener绑定的事件 就不会被覆盖
element表单问题
在使用element的表单时，需要一次数据回显，在数据回显的时候，习惯性会吧当前行的数据直接赋值给表单，但是这样会出错，因为两个变量都是对象的形式，所以在赋值的时候就会出现把等号左边的地址 指向等号右边变量的内存地址上，即两者其实是指向同一个内存地址。那么 在修改表单上的内容的时候 也容易把原先的当前行的内容重新清空。
解决办法：
新变量名= JSON.parse(JSON.stringify(旧变量名));
转换一下 就不会产生这种情况。
校验debounce
在开发过程中 很有可能会出现 填入的内容需要进行后台验证，那么此时如果每输入一次就请求一次后台 不太现实。可以使用防抖函数 让用户在结束操作后的一定时间后才发送请求。
// 校验规则
var _this = this;
if (!val) {
this.numberLength = 0;
return callback(new Error('请输入工号'));
} else {
this.debounce(
function() {
var reg = /^[a-zA-Z0-9]+$/;
if (reg.test(val)) {
var bytes = _this.wordlength(val, 20).bytesCount;
var index = _this.wordlength(val, 20).index;
if (bytes > 20) {
_this.addSingleForm.number = val.substring(0, index + 1);
_this.numberLength = 5;
} else {
_this.numberLength = bytes;
}
} else {
return callback(new Error('仅支持数字和大小写字母'));
}
},
700,
0
)();
}
callback();
callback的作用是让用户去报错，如果没有错 验证通过就使用callback让报错信息隐藏，所以 可以让其在改显示错误信息的时候显示错误信息 不该显示错误信息的时候就把错误信息隐藏掉。
改成：
// 校验规则
var _this = this;
if (!val) {
this.numberLength = 0;
callback(new Error('请输入工号'));
} else {
this.debounce(
function() {
var reg = /^[a-zA-Z0-9]+$/;
if (reg.test(val)) {
var bytes = _this.wordlength(val, 20).bytesCount;
var index = _this.wordlength(val, 20).index;
if (bytes > 20) {
_this.addSingleForm.number = val.substring(0, index + 1);
_this.numberLength = 5;
} else {
_this.numberLength = bytes;
}
let data = {};
data.personnelNumber = _this.addSingleForm.number;
checkPersonnelNumber(data).then(res => {
if (res.resCode == 1) {
callback(new Error(res.resMsg));
} else {
callback();
}
});
} else {
callback(new Error('仅支持数字和大小写字母'));
}
},
700,
0
)();
}
element 消息提示组件内容使用html
在开发过程中 很有可能会遇到，消息提示中 需要换行的情况，如下：
但是 如果直接用以下方法是不成功的：
let msgArr=['消息1','消息2'] // 错误消息
this.$message({
message: msgArr('<br >'),
type: 'error'
});
如果是以上方法想要展示出错误消息换行的话 是失败的。
换个思维：如果能把所有的消息包在一个块级标签里再输出那么就能成功的换行了。
如下：
let msgArr = [];
let length = 0;
var h = this.$createElement;
msgArr.push(
h( 'p',
{ style: { color: 'red' }},
this.getPeriod(this.addGradeForm.gradeList[index].schoolperiod) + '学段' +this.addGradeForm.gradeList[index].gradeName + '添加失败，原因：' + item.resMsg.split(';')[0]));
this.$message({
message: h('div', null, msgArr),
type: 'error'
});
使用渲染函数 把错误消息包在标签里面 这样就可以成功将消息换行输出了！
文件选择
文件选择器在非ie浏览器 或者版本过低的情况下 会出现 在页面加载完成之后 无法自动点击触发调用文件选择器，是因为版本级别高的浏览器把非用户触发文件选择器的事件拦截了。文件选择器只能通过用户点击触发。
在选择文件的时候会出现以下情况：
1.两次选择同一个文件，但是在第二次的时候，不会触发@change事件；
解决方法：
//html代码
<input type="file" id="uoloadImgs" ref="referenceUpload" style="display: none" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
//js代码
uploadImg(){
//在做完一系列的操作之后把该input的value值清空
this.$refs.referenceUpload.value = null;
}
在使用element的隐藏组件 el-scrollbar时，出现过一种情况：
el-scrollbar的父元素的高度是不固定的，只有一个最大高度（max-height），但是el-scrollbar设置了高度为100%，就会出现滚动条失效的情况，在这种情况下，要解决这个问题，可以用一下方法：
.el-scrollbar{
height" 100%;
max-height: 310px;
}
.el-scrollbar__wrap{
max-height: 310px;
}
可以给el-scrollbar设置样式：height：100%；max-height：310px（父元素的最大高度）；同时
在element中使用el-scrollbar 需要注意：
1.el-scrollbar的父元素要有一个高度，max-height也就可以；
2.el-scrollbar的父元素不能有 overflow: hidden;会导致滚动条无法滚动 //不一定。。。。
axios传值问题
在使用axios和后台对接接口的时候，会出现content-type是application/x-www-form-urlencoded的时候，传输的数据格式不对，那么就可以对数据的格式进行转换，转换之后，后台就能顺利获取数据了！
两种方式：
方法一（在vue中适用，在其他jq的项目中 也使用）
如果是在vue中使用，那么就要在vue的拦截器里先把data的格式转换了，再传到后台去。
function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
ret = ret.substring(0, ret.lastIndexOf('&'));
return ret
}
方法二（使用插件，使用之前记得安装或引入）
config.data = qs.stringify(config.data) // 转为formdata数据格式
备注
如果后台需要传入list类型的数据，即id[]: 1 id[]:2 这种格式的数据的话可以用以下方法：
config.transformRequest= [
function (data) {
//有需要把数组以list类型转换发送到后台的，需要把数据进行转换
return qs.stringify(data, { arrayFormat: 'brackets' })
}
]
以下是和传输数组数据到后台的qs配置相关内容：
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘})
//形式： ids[0]=1&aids[1]=2&ids[2]=3 @RequestParam无法接收
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘})
//形式：ids[]=1&ids[]=2&ids[]=3 要加[]
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat‘})
//形式： ids=1&ids=2&ids=3 不能加[]
如果需要传输文件到后台的话 content-type必须修改成multipart/form-data，但是数据格式可以不需要进行转换，可以直接传输到后台
config.headers['Content-Type'] = 'multipart/form-data';
config.transformRequest= [
function (data) {
return data
}
]
