在el-form中自定义校验规则（关联字段校验，需要在校验方法中用到this）

官方写法

el-form是支持自定义规则的，官网中是这么写的

data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
    return {
	    rules: {
	    	pass: [
	            { validator: validatePass, trigger:'blur'}
	        ],
	    }
    }
 }

初步想法

结合我项目的实际，vue2+ts，那么应该是这样写：

limitPay = (rule: any, value: string, callback: any) => {
    // console.log(this, value)
    if (this.formModel.code == '') {
      callback(new Error('code不能为空'))
    } else {
      if (this.showBINFlag) {
        if (this.formModel.bin == '') {
          callback(new Error('bin不能为空'))
        }
      }
      callback()
    }
  }
 rules: {
 	limit_pay: [{ validator: this.limitPay, trigger: 'change' }],
 }

由上可以看出，我是想根据某个字段是否为空来判断当前字段是否报错。那么问题来了，我的formModel的数据是在created里面生成的，初始值其实是“{}”，而由于校验变量limitPay是在data中定义的，所以这里面的this拿到的值也是{}，很显然在这里是获取不到对应的字段值的。
之后也想过将limitPay变量初始值定义为null，然后在created中为其赋值，但是还是一样的问题，rules里面只取了初始值。

最终解决方法

其实也很简单，就是直接定义一个方法，在该方法中返回自定义校验的方法即可：

rules: {
	limit_pay: [{ validator: this.getValidator(), trigger: 'change' }],
}
created() {
	// 获取表单的值
	this.getFormModel()
	this.getValidator()
}
getValidator() {
	return (rule: any, value: string, callback: any) => {
    // console.log(this, value)
    if (this.formModel.code == '') {
      callback(new Error('code不能为空'))
    } else {
      if (this.showBINFlag) {
        if (this.formModel.bin == '') {
          callback(new Error('bin不能为空'))
        }
      }
      callback()
    }
  }
}

这样，返回的方法中得到的this就包含了初始化表单后的值了，如此也就能取到对应的字段值（必须先生成表单formModel的值之后再调用返回校验变量的方法）。当然，如果你是在data里面就可以获取到表单的当前值，也是没必要这么做的，只需要像我的初步想法那样就可以了。
总之还是要多想想