element 表單校驗失敗自動聚焦到失敗的input框

1.在對應的input框上添加ref屬性，直接根據ref就可精確地獲取到元素

<el-form-item label="課程名稱" :label-width="formLabelWidth+'px'" prop="title">
      <el-input  ref="title" v-model="form.title" placeholder="請輸入課程名稱" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="課程難易程度" :label-width="formLabelWidth+'px'"  prop="level">
      <el-select ref="level"  v-model="form.level" placeholder="請選擇課程難易程度">
        <el-option label="初級" value="初級"></el-option>
        <el-option label="中級" value="中級"></el-option>
        <el-option label="高級" value="高級"></el-option>
      </el-select>
    </el-form-item>

2. element-ui自帶的表單驗證返回中包含一個invalidFields對象，此對象包含了驗證失敗的所有屬性名

 

3.遍歷invalidFields對象 的屬性，拿到它的屬性值 與我們上面定義的 ref 一樣，我們就可以拿到失敗的控件，利用focus 自動聚焦就ok 了 

  for(var  obj  in  invalidatedata) {
          // console.log(obj)
            // console.log(obj)
            // console.log((this as any).$refs[obj].focus())
          //  console.log(this.$refs[obj]);
           (this as  any).$refs[obj].focus();
           break;
          // console.log(this.$refs.title)
          // (this as any).$refs[obj].focus()
        }