el-menu
el-menu的default-active属性支持默认选中项，切换时也会自动切换这个效果，然鹅，如果你直接访问不是默认选项的地址，就尴尬了；此时就需要动态选中默认项。
如果换成下面的写法就美滋滋啊，router属性还可以让页面直接跳转；$route.path与数据无关，而是当前页面的地址.
<el-menu :default-active="$route.path" router>
<el-menu-item v-for="route in routes" :key="route.path" :index="route.path">{{route.name}}
</el-menu-item>
</el-menu>
data () {
return {
routes: [
{path: '/home/link1', name: '页面1'},
{path: '/home/link2', name: '页面2'},
{path: '/home/link3', name: '页面3'},
{path: '/home/link4', name: '页面4'},
{path: '/home/link5', name: '页面5'}
]
}
}
form
不得不说element form的验证很自由很舒服，写在form-item上可以，写在data里面rules也可以，巴拉巴拉；
不过验证一定要加入prop属性，prop需要绑定传入 Form 组件的 model 中的字段；
记一个特殊的例子：动态增减表单项
这个例子的验证建议直接required写完事了。。
修改主题颜色
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
theme-chalk下的index.css就是我们使用的主题默认颜色了，我们的目的就是把它换掉。
在官网可以看到提供的两个做法；
如果仅替换主题色
推荐使用在线主题生成工具，切换一个颜色然后下载，解压之后，在项目目录下新建theme目录，放入压缩包的fonts目录和index.css。
然后在main.js中引入新的index.css，别忘了把默认的主题颜色删掉；
这样就算是完成了替换主题色。
如果需要自定义写颜色，那就仔细研究一下官网提供的做法。
预览图片
elementui自带的图片预览框架有点弱啊，虽然可以打开一组特定图，但是无法控制顺序等等。
单张图怎么预览呢？通过点击图片或者按钮或者其它的方式？
1，import
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
2，设置data为默认显示为false
showViewer: false,
imgUrl: null
3，methods增加事件
openFile () {
this.imgUrl = '图片地址'
this.showViewer = true
},
closeViewer () {
this.showViewer = false
}
4，template增加代码
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[imgUrl]"></el-image-viewer>
5，本来我以为这个方法只能预览单张图片，经过对引入文件的解读，发现可以使用:on-switch方法来处理图片组的翻动，此时:url-list=图片数组。
对这段方法有疑问的可以去看一下第一步引入的文件，参考了其内部自带的功能。
当一个页面有多个upload组件的时候，如何区分上传得到的结果来源。
如果是静态的，可以在on-change的时候写不同的事件，这没什么说的；如果是for出来的怎么办？on-change都是一样的。
有人说要去改源码，这有多坑？如果你打包给同事的时候，没有打入node_modules，如果你备份的时候没有备份node_modules。。。所有改源码不靠谱。
看教程那边，on-remove、on-change等事件返回的都是file和fileList，没有识别可以用到的关键字。用以下方法可以解决这个问题：第三个参数可以用来放你的标志，index，key都可以。
:on-change="(res,file)=>{return handleChange(res, file, index)}"
表单验证无效
如果B字段是否显示要根据A字段的结果来验证，可以使用 this.$refs.ruleForm.validateField('checkB') 的方法来触发绑定的验证。
在看同事代码的时候发现默认的validate方法没有生效，没发现逻辑有什么问题，最后是因为自定义的校验方法，有一项没有包含callback()。所以自定义的校验方法一定要包含callback()啊
自定义表单验证
自定义表单验证的时候，如果有几个参数用的是同一个方法，如何加上关键字的标记呢？
默认的自定义校验方法：
{ validator: checkAge, trigger: 'blur' }
带参数的校验方法(用一个箭头函数，带上一个关键字即可)
{ validator: (rule, value, callback) => {this.customMethod(rule, value, callback, yourKeyword)}, trigger: 'blur' }
select的value-key
如果绑定的model数据是一个object而不是字符串的时候，一定要加这个属性