element-ui+vue-element-admin遇到的坑

element-ui遇到的坑

在做后台项目的时候遇到的一些问题(目前只停留在知道怎么解决的层面，后面有时间会去搞清楚原因，所以在此仅提供大家解决方法)

• Dialog中嵌套Tabs卡死

安装vue-element2.6.3版本
或者升级vue至2.6.10版本

• 使用$emit和$on通信失败

  $emit和$on约定的事件名称必须是小写的，驼峰命名不行，短横线命名法也不行 。！！！on监听要在emit前，否则会报错，所以在你emit一个事件的时候要确保监听组件已经创建。

• 子组件不能更改父组件"流"下来的数据(prop)

  使用事件($emit)进行传值

• vuex的getters不要和state中的数据重名！！！否则调用getters得到的就是undefined

• 使用es6的async和await的时候注意await的位置,有时候await写在async表示的方法里的调用的函数中会报错，因为async并不是约束之后方法中调用的函数的，解决方法就是在函数前使用async即可。

• 更改el-button的位置(left/right)导致只有一半的button可以触发点击事件
  !!千万不能大意了
  八成是被透明的元素挡住了，设置z-index即可解决(今天遇到这个问题还纠结了好一会…真是笨啊)

• 多个功能使用的一个el-form组件进行校验，校验错误的结果会展示在其他组件上
  因为vue重用了组件，给每条设置不同的key就好了( :key=“formData.id” 等等)

  【key值可以解决很多问题，vue会尽可能的对重用组件,遇到问题可以想想    “是不是只要这个组件独立就能解决”      如果是那很可能设置key值就可以解决】

• 一个el-form表单，根据不同的条件(如下拉框选择的值不同),相同的el-form-item展示相同的label以及内部元素(v-if进行判断)，验证错误后切换，错误会延续至切换后的页面
  用v-show代替v-if

• el-form的resetFields()方法失效
  el-form-item要设置prop属性，因为源码中这个方法都是基于prop存在的情况下
  (参考这个博文 https://www.cnblogs.com/wzcsqaws/p/11493162.html)

• 不要在v-if的容器中插入dialog ，会有意想不到的效果。可以将dialog组件注册在其他页面。