element使用组件el-form自动定位到未填写的必填条目

问题：在form表单el-form中经常会出现表单条目比较多的问题，而且在提交的时候需要校验表单并且定位到相应的条目位置。

解决：

html：

<el-form ref="form" :model="form" :rules="rules" label-width="140px">
    <el-form-item label="规则名称" prop="ruleName" ref="ruleName">
        <el-input v-model="form.ruleName" clearable placeholder="请输入规则名称" />
    </el-form-item>
    ...
</el-form>

其中el-form-item中ref是关键定位点。

js：

/**
    * @description: 提交
    * @return {*}
    */
submitForm() {
    this.$refs['form'].validate((valid, object) => {
        if (valid) {
            console.log('验证通过')
        } else {
          let str = [];
          for (let key in object) {
            object[key].map((item) => {
              str.push(item.message);
            });
            let dom = this.$refs[Object.keys(object)[0]];
            if (Object.prototype.toString.call(dom) !== '[object Object]') {
              dom = dom[0];
              break; //结束语句并跳出语句，进行下个语句执行
            }
            // 定位代码
            dom.$el.scrollIntoView({
              block: 'center',
              behavior: 'smooth'
            });
          }
          // 页面提示未通过校验字段项，并以逗号分隔
          this.$message.error(str[0]);
        }
    });
}

 这样就可以实现定位到未填写的条目了.