Element里的自定义表单验证 名称 和编号

首先现在data里定义一个做表单校验的数组

data(){
return {
originList: [] // 在做校验时需要用到的数据
}
}

然后在获取数据的时候给originList赋值

async loadPermission() {
      const res = await getPermission()
      console.log(res)
      //获取到id, pid, name, code 这四个数据来做表单校验
      this.originList = res.data.map(({ id, pid, name, code }) => ({ id, pid, name, code }))
    }

定义校验的规则
validCode和validName是自定义的校验规则

rules: {
        code: [{ message: '不能为空', required: true, trigger: 'blur' }, { validator: validCode, trigger: 'blur' }],
        name: [{ message: '不能为空', required: true, trigger: 'blur' }, { validator: validName, trigger: 'blur' }]

在data里定义validCode和validName

data(){
//编号的自定义校验
 const validCode = (rule, value, callback) => {
      // 添加时的校验：code不能重复
      let existCodeList = this.originList
      if (this.isEdit) {
        // 编辑时的校验: code能取自己
        existCodeList = this.originList.filter(item => item.id !== this.formData.id)
      }
       //用map找到数组里的id,在用includes的方法看数组里有没有value如果有就提示已占用,如果没有就正常通过
      existCodeList.map(it => it.code).includes(value) 
        ? callback(new Error(value + '已经占用')) 
        : callback()
    }
//名称的自定义校验
    const validName = (rule, value, callback) => {
      // 添加时的校验： 名字不能取子元素的名字
      let existNameList = this.originList.filter(item => item.pid === this.formData.pid)
      if (this.isEdit) {
        // 编辑时的校验： 名字不能取兄弟（排除自己）的名字
        // 找兄弟，排除自己
        existNameList = this.originList.filter(item => item.pid === this.formData.pid && item.id !== this.formData.id)
      }
      //用map找到数组里的id,在用includes的方法看数组里有没有value如果有就提示已占用,如果没有就正常通过
      existNameList.map(it => it.name).includes(value) {
        ? callback(new Error(value + '已经占用')) 
        : callback()
    }
return {
originList: [] // 在做校验时需要用到的数据
}
}