Vue3 循环表单对复杂校验规则的实现

        最近又遇到了个很奇怪的需求，需要循环表单列表中某一项的数据状态来确定其他的数据是否必填；这就需要在写自定义表单校验规则的时候 获取到当前列的信息。

        一般的ElementPlus的循环表单的自定义校验，通过 props添加“动态的下标+属性名” 来绑定自定义校验规则中validator函数的value值，这里拿ElementPlus的源码举例：

        这里在validator接收函数只能获取到el-form-item 绑定的数据项的数据信息；那要怎么才能获取到当前列的信息呢？

        我的解决方案是将validator所接收的函数 改为了 去接收一个 “执行接收（domain,index）参数并返回 checkName函数的新函数”; 通过返回回调函数的方式 获取到当前列数据项的值，代码如下：

        

        这样就可以在 validator函数中获取到 domain和当前的数据项下标的信息了

附注： 

        之前在返回的函数中是直接引用了非返回函数的作用域的变量并将函数返回了出去 这样有可能会引起闭包影响页面性能；那么可以将 接收的domain和index形参 放到 返回的函数上就可以了，修改后的代码如下：

const checkName = (domainInfo:DomainItem, indexNumber:number) => {
  return  (rule: any, value: any, callback: any, source: any, options: any, item = domainInfo, index = indexNumber) => {
    console.error(item,index)
    if (value === '') {
      callback(new Error('Please input the name'))
    } else {
      callback()
    }
  }
}