解决 Element 自定义表单校验规则的报错

问题

在使用 Element 的表单的时候，有的时候需要使用自定义的验证规则，而写好规则验证函数的时候会提示获取不到表单的字段
比如下面的验证规则中使用了 this 来获取到当前表单中的其他字段，然后在表单验证的时候报错了：

验证规则

validator(rule, value, callback) {
  console.log(this.form)
  if (!this.form.category) {
    return callback(new Error('请先选择组别'))
  }
  if (!value && this.form.category !== '2') {
    return callback(new Error('请选择服药方案'))
  }
  callback()
},
trigger: 'change',
}

验证报错

vue.runtime.esm.js:619 [Vue warn]: Error in event handler for "el.form.change": "TypeError: Cannot read property 'category' of undefined"

found in

---> <ElFormItem> at packages/form/src/form-item.vue
       <ElCard> at packages/card/src/main.vue
         <ElForm> at packages/form/src/form.vue
           <ElCard> at packages/card/src/main.vue
             <Anonymous>
               <Index> at src/views/patient/index.vue
                 <AppMain> at src/layout/components/AppMain.vue
                   <Layout> at src/layout/index.vue
                     <App> at src/App.vue
                       <Root>

通过报错的原因主要是查询不到 this 中的 form，而在下文中使用了 this.form 中数据因此报错了。

解决方法

此处中的 this 获取不到主要是我们使用了 function 的声明和 key-value 的缩略写法，这样函数中的 this 绑定的作用于是该规则的作用于，因此无法获取到 this 的值；如果我们使用箭头函数来声明该规则函数，由于箭头函数中的 this 的值绑定的是他的父级作用域，所以 this.form 的值就是我们期望的值啦。
我们只需要将此处的函数声明方法变更为箭头函数来声明即可

{
  validator: (rule, value, callback) => {
    console.log(this.form)
    if (!this.form.category) {
      return callback(new Error('请先选择组别'))
    }
    if (!value && this.form.category !== '2') {
      return callback(new Error('请选择服药方案'))
    }
    callback()
  },
  trigger: 'change',
}

经过测试自定义的规则，报错就消失啦