Element ui使用相关

v-if 切换 table，导致表格数据显示错乱

原因：使用v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现数据冲突导致table渲染出错

解决：在要切换的table表上加上 key

form表单编辑时，回填的数据修改无效，都会被复原成回填值

原因：回填项v-model绑定的对象未在data中初始化，导致回填修改无法监听到变化

解决：

...
 <el-form-item prop="sourceType" key="sourceType">
     <el-input type="text" v-model="form.sourceType"></el-input>
 </el-form-item>
...
export default {
     data: function () {
         return{
             form：{
                sourceType:''//申明v-model绑定值
             }   
         }
     }
}

table表格默认选中失效

可能原因：

1. table的 toggleRowSelection 方法来实现默认勾选，检查方法是否使用正确；
2. 默认勾选只能对 table 显示的数据有效，而不是对选中后返回的数据

input  change事件未触发，失焦后才触发

原因：el-input实际是封装了原生input，而原生input的onchange事件本身就是失焦时触发

解决：使用input事件监听，使用如下，这么写是因为传递给input事件的必须是一个function才能得到value值

<el-input
    v-model="extraValue.names[index].value[indexItem]"
    placeholder="请输入"
    @input="e => stdValueChange(index, indexItem, e)"
    class="stdValue-subItem-input">
</el-input>

 动态表格导致固定列下沉

原因：

解决：在数据变动处加如下代码

      // 解决数据动态变化表格错位问题
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      }

el-dialog/el-drawer初始化校验form表单，并显示了校验文字

原因：打开表单后对表单进行了赋值，且是空值（例如：初始化操作，可能在表单渲染完后才执行等）

解决：

针对不同情况的解决方法：

1.因为 rules 改变触发

//el-form validate-on-rule-change设置false，是否在 rules 属性改变后立即触发一次
 <el-form ref="form" :model="form" :rules="rules" :validate-on-rule-change="false">

2.因为渲染后内容初始化或者其它赋值导致

  this.$nextTick(() => {
    this.$refs.dataForm && this.$refs.dataForm.clearValidate();
  })