element的Form表单使用注意事项

在用vue+element 组件开发的过程中所遇到的问题。

Question1: el-form 上添加disabled 目前不起作用，原因是项目安装的element-ui版本太低了

<el-form disabled :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic" >

resolve: 在v-input 上添加即可，在vue中使用就可以在其属性前加上v-bind

<el-form-item label="省" prop="name">
  <el-input v-model="pickNodeData.name" :disabled="isEdit"></el-input>
</el-form-item>

Question2:el-form中用resetFields方法清空表单时应该注意以下两点

        1.页面上一定要用v-show 代替v-if ，否则this.$refs.refName时调用resetFields方法报错。因为this.$refs.refName === undefined

          2.resetFields方法在清空时不一定是以ref="form1" 这个值来捕获的，而是根据   :model="pickNodeData"  来确定的

            e.g.:   :model="data"很重要，有多个表时尽量不要用同一个名字，以下不会同时清空form9和form10 ，清空语句：this.$refs.form9.resetFields();    

<el-form v-show="nodeLevel == 0" ref="form9" :model="pickNodeData" :rules="rules" label-width="80px">

<el-form  ref="form10" :model="pickNodeData1" :rules="rules" label-width="80px">

                如果写成如下这样，则form9,form10都会被清空，清空语句：this.$refs.form9.resetFields(); 底层应该也是通过观测变量pickNodeData 来做清理的

<el-form v-show="nodeLevel == 0" ref="form9" :model="pickNodeData" :rules="rules" label-width="80px">

<el-form  ref="form10" :model="pickNodeData" :rules="rules" label-width="80px">