element-ui一些注意点：
1.change （$event，“你要传递的其他值”），使用el-select组件时，想传递多个值。
或者 在el-option上的value属性上传递对象 eg:
:value="{'classId': ele.classId,'index': $keys,'sonIndex':$key}"
2.value-key 是作为绑定对象的值时的必填项，作为唯一标志，el-select
3.循环遍历多个el-select组件，选项选中，数据更新了，但是视图不更新。
import tools from '@/common/tools/index.js'
为什么就可以找到src目录下的文件？因为在build/webpack.base.conf.js里面定义了简写形式
alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), }
所以@ == src ，也造成了@后面要加/ ，等价于 src/ 。
5.clearValidate()要用在before-close函数和取消按钮函数里，其他地方不好使；Dom模板里不能用this，eg:$refs[‘form’].clearValidate();
解：Element-UI中的Dialog的内容是懒渲染的，即在第一次被打开之前，传入的默认slot不会被渲染到DOM上，如果要操作DOM，需要在open事件回调中开发代码。总结：直接阅读组件底部的Attributes、Slot、Events相关说明。可以通过node_modules读一下element-ui中Dialog组件的源码，使用BEMCSS规范，props用法，各个Vue用法的规范使用。
6.Dom里面的form-item循环里validator校验不能用this.xxx，用了会报错；不是循环的validator校验就可以用this.xxx，不会报错；自定义校验函数的回调函数callback(new Error('文案))；和callback('文案'); 第二种回调用法在for循环方式中不生效。
7.菜单路由路径和Vue-router里面的配置是全匹配，有空格都不行。
8.Form的每个item中的validator自定义校验逻辑只能有一个，如果是2个，就会promise的状态一直未padding，排查问题可用代码的删除排查法，删到最简单来排查。
9.多个表单校验，可用Promise.all[].then();很好用。
9.针对Vue响应不及时问题，setTimeOut是个很好的解决问题的办法。Event loop概念，但是有没有其他更好的办法呢？Object.assign(); Vue.$set(); 除此之外还有一个watch的巧用，数据变化就重新复制(解决jiaoshi工作台切换单元综合演练数据不更新问题)
10.webpack兼容问题，在Vue项目中，Vue文件的style中的type='text/css';script中的type='text/javascript'，与webpack4版本不兼容，需要删除掉这样的写法。
11.Vue项目中DOM渲染结果会有 ‘data-v-xxx’字样，是因为Vue组件中使用了scoped，保证各组件间样式不互相影响，给每个component都做了唯一的标记，每引入一个新组件都会多一个data-v-xxx字样。
12.Element-UI的表单提交中，如果加了自定义校验规则，最后一定要有return callback()；不然表单执行不下去的。曾经找了半天错误，才找到这个原因。
checkLogId(rule, value, callback){// 校验LodId格式 以C开始，后面是数字
let logId = this.ruleForm.logId;
let headLetter = logId.slice(0,1);
let otherLetter = logId.slice(1);
let rules = /^\+?[1-9][0-9]*$/; // 正整数规则
let re = new RegExp(rules);
if( headLetter !== "C" ){
return callback(new Error('打点ID格式添加错误'));
}else if( !re.test(otherLetter) ){
return callback(new Error('打点ID格式添加错误'));
}
return callback();
},
13. 模板列表使用flex布局，在最后一行，不足一行时，两端分布的解决：
一行n个，在最后放n个写死的item，宽度和item保持一样，高度设置为0。
延伸：是否有更优雅更好的实现方式呢~
14. 列表中为什么这个样式都需要放外面？
el-button--default > span
解析：a. scoped利用CSS3属性选择器的原理来控制作用域，而Vue组件会给html元素标签添加data-*的属性。
b. 在当前组件引入另一子组件时，子组件生成的HTML元素并没有被加上属性作用域；而编译后的CSS选择器加在了‘尾选择器’上，这样的偏差导致了scoped内的样式对于子组件样式的覆盖重写失效。
c. Scoped只对当前页面直接使用的标签样式有效
d. 解决：另起一个不加scoped的style标签，在里面用CSS选择器层级覆盖控制子组件样式。
延伸：如果更优地解决这样的场景？CSS编译时如何在尾部加入属性选择器的？
15. 搜索中重置逻辑不可用？
this.$refs[formName].resetFields();
解析：formName此处要和el-form的ref、model保持一致，而且每个el-form-item的prop属性对应值于v-modal绑定值这样使用resetFields重置才会生效，效果是用data里面值覆盖了原来的值，潜台词就是data里面如果有默认值，此时item里面就是默认值而不是空值。
el-button--default > span 建站列表为什么这个样式都需要放外面？
