动态表单校验问题+校验失败自动滚到目标元素

最新推荐文章于 2024-07-08 14:39:30 发布

小佩呀~

最新推荐文章于 2024-07-08 14:39:30 发布

阅读量162

点赞数

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/qq_42769032/article/details/131956120

版权

1：动态表单校验

<el-form :model="form" ref="contractFormRef" label-width="140px" :rules="rules">
<div v-for="(item, k) in form.list" :key="k">
              <div v-for="(val, i) in item.proList" :key="i">
                    <el-form-item
                      label="项目名称:"
                      :prop="`list[${k}].proList[${i}].name`"
                      :rules="[{ required: true, message: '请输入项目名称', trigger: 'blur' }]">
                      <el-input
                        v-model.trim="val.yearGasSupply"
                        type="text"
                        placeholder="请输入年合同量"
                      >
                       </el-input>
                    </el-form-item>
                 
              </div>
              </div>
          </div>
</el-form>

list = {
    proList: [
        {
            name: ''
        }
    ]
}


//实现方式：动态绑定prop，rules

:prop="`list[${k}].proList[${i}].name`"
:rules="[{ required: true, message: '请输入项目名称', trigger: 'blur' }]"



2： 实现滚动到目标元素，一般第一个元素，校验不通过会添加class为el-form-item_error的类

this.$rers.formRef.validate(valid => {

    if (valid) {
        // 校验通过，调用提交接口
     } else {
        // 校验未通过
        this.$nextTick(() => {
          if (
            document.querySelectorAll('.el-form-item__error') &&
            document.querySelectorAll('.el-form-item__error').length > 0
          ) {
            const target = document.querySelectorAll('.el-form-item__error')[0];
            target.scrollIntoView({ block: 'center', behavior: 'smooth' });
          }
        });

     }
})