vue中el-form验证规则以及el-input输入框自动聚焦

在做项目的时候遇到一些问题，记录一下做个笔记。

1、项目中有这样一个需求，打开一个弹框，弹框内容是一个表单的。当弹出一个弹框时会自动聚焦并做校验，此时我并不想弹框一打开就提示我要输入的必填字段，解决方案就是，在el-form加一个属性:validate-on-rule-change="false"，如下：

<el-form
  ref="add_custome_form"
  :rules="rules" :validate-on-rule-change="false"
  :model="add_custome_form"
  label-width="80px"
  size="mini"></el-form>

其实弹框换成页面应该也是一样的，需求都应该差不多。

2、在我的项目中由于表单是一个动态添加的表单，此时表单内容有些有初始化的数据，所以我需要页面进来时就做一个验证，验证必填项是否有值的情况，需要自动聚焦。

在el-form中:validate-on-rule-change="true"这是默认的，自定义指令聚焦 v-focus

<el-form  label-width="100px" ref="add_custome_form" :rules="rulesInfo" :model="post_data" :validate-on-rule-change="true">
  <template  v-for="item in getFieldList">
    <template v-for="field in item.fields">
          <!-- 文本1 -->
          <template v-if="field.field_type === 1">
            <el-form-item :label="field.field_desc" :key="field.field" :prop="field.field">
              <el-input clearable ref="siteInput"  v-focus
                @blur.prevent="inputBlur(field.field)"
                v-model="post_data[field.field]"
                :placeholder="'请输入'+field.field_desc"

              ></el-input>
            </el-form-item>
          </template>

……。后面自动省略

input自动聚焦指令：

directives: {
  focus: {
    inserted: function (el) {
          // el.focus()
      // 聚焦元素
      el.querySelector('input').focus()
     }
  }
}