表单内容
 
 1、写在data内验证：
 ：代表这是一个表单
 -> ref：表单被引用时的名称，标识 是我们绑定的对象
 -> rules：是动态绑定的rules，表单验证规则
 -> model：表单数据对象 是绑定我们form表单中需要提交给后台的一个对象
 -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
 -> ：表单中的每一项子元素
 -> label：标签文本
 -> prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
 在每一个el-form-item上面绑定prop属性，这个属性就是我们下面要做正则校验的地方
 ：输入框
 -> v-model：绑定的表单数据对象属性
 -> style：行内样式
 -> maxlength:最大字符长度限制
 2.data数据
 
 formRules：与上文 ‘表单内容’ 中 表单的 :rules 属性值相同
 userName：与上文 ‘表单内容’ 中 表单子元素的 prop 属性值相同
 
 var validatePass = (rule, value, callback) => //就是我们的回调函数，需要大家注意的是，这个没有在return的对象中，在data中
 rules: { // 就是我们在el-form中绑定的rules，进行表单的验证
 
name: [ // 我们在el-form-item中绑定的prop，就是这里的name，需要大家注意，这具有唯一性


{ required: true, message: '请输入姓名', trigger: 'blur' } // require:是否必填，如不设置，则会根据校验规则自动生成;message:是提示的内容；trigger：是什么事件触发
trigger: ‘blur’ 表示“当失去焦点时（光标不显示的时候），触发此提示” 


],
{ validator: missionPass, trigger: 'change' } // validator:对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

 
 
 import Vue form 'vue’的意思 
 
 
 
 
 
  

   
1、import Vue form ‘vue’ 写全的话是import Vue from ‘…/nodemouls/vue/list/vue.js’； 此时在webpack.base.conf.js中进行了定义，内置了一些选项，extenions:[’.js’,’.vue’,’.json’],意思是省略后面的后缀，由webpack来自动为我们加上。
2、如果名字比较长，还可以起个别名。
alias:{ ‘@’:resolve(‘src’)},
它的意思是在vue项目中，引入路径的时候使用@即代表src文件夹，省去了…/…/…/的操作，这样写比较十分方便。
3、当我们在模板中写img的时候有时也需要翻着找，那么能用@代替吗？答案是当然可以的，
比如在assets文件夹中有张图片，logo.png。以往写可能是：
 
   
 
    
<img src="../../src/assets/logo.png">
 
   
 
   
现在知道怎么回事以后可以直接这样写：
 
   
 
    
<img src="@/assets/logo.png"
 
   
 
   
试验发现这是能成功的，但是lssue提出的方案是在@前面加上~。两者均能成功
 
   
 
  
  
 
  
 
  
 
   
 
   
 
   
 
   
 
   
 
   
 
  
 
 
 
 

  posted @ 
  2019-01-21 14:47 
  xtjatswc 阅读(
  ...) 评论(
  ...) 
  编辑 
  收藏
 
 

今天想使用新增和删除使用一个dialog，这就涉及到点击添加按钮需要清空表单数据的问题，我第一个想到的是调用resetFields方法。我直接写了之后是这样的
 
this.$refs[formName].resetFields()
 
 结果直接报错，于是我就上网上百度了后，发现改成这样就不报错了。
 
 

this.$nextTick(function() {
   const el: any = this.$refs[formName];
   el.resetFields(); 
});
 
 于是心想肯定可以了，结果点击界面还是没反应，最后去官网看了下，发现我没有在表单的el-form-item写prop属性。
 
 
最后加上后，在点击添加按钮时候调用reset方法就可以了 。
 
 
但是在使用的时候要先设置打开model的变量为true之后再调用，因为只有设置为true后才能找到对应的dom元素。 而且还是要使用nextTick的