element-ui 自定义组件表单校验

自定义组件如何配合 el-form 做表单校验

一、自定义组件混入element-ui 的 emitter 模块

该模块提供了 dispatch 方法用于通知父级组件触发校验方法。

import emitter from 'element-ui/src/mixins/emitter';
export default {
  // ...
  mixins: [emitter],
  // ...
}

二、接收 elForm 和 elFormItem 的组件注入

注意：不使用也要接收，不接受不会触发通知

export default {
  // ...
  inject: {
    elForm: {
      default: '',
    },
    elFormItem: {
      default: '',
    },
  },
  // ...
}

三、通知校验

通知校验使用 emitter 提供的dispatch方法
一般是在 值改变时 或 blur 事件调用

export default {
  methods: {
    change(val) {
      this.dispatch('ElFormItem', 'el.form.change', [this.val]);
    },
    onBlur() {
      this.dispatch('ElFormItem', 'el.form.blur', [this.val]);
    }
  }
}

dispatch 方法参数说明

export default {
  methods: {
    dispatch(componentName, eventName, params) {}
  }
}

emitter源码里 dispatch 有三个入参
1、componentName： 是要通知父级组件的名字，所以我们要通知的父级组件是 <el-form-item /> 名字为 ElFormItem。
2、eventName: 触发父级组件的方法名，<el-form-item /> 组件里监听两个事件

this.$on('el.form.blur', this.onFieldBlur);
this.$on('el.form.change', this.onFieldChange);

所以 eventName 可以是 el.form.blur 和 el.form.change，具体触发那个要看实际逻辑，还有和表单组件rules 规则 trigger 的配置，trigger 配置的对应事件才出触发。
3、params: 需要校验的值，类型为 Array。

完整代码

<template>
  <input type="text" v-model="val" @input="change" @blur="onBlur" />
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';

export default {
  mixins: [emitter],
  model: {
    prop: 'value',
    event: 'change',
  },
  inject: {
    elForm: {
      default: '',
    },
    elFormItem: {
      default: '',
    },
  },
  props: {
    value: {
      type: String,
    },
  },
  data() {
    return {
      val: '',
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.val = val;
      },
    },
  },
  methods: {
    onBlur() {
      this.dispatch('ElFormItem', 'el.form.blur', [this.val]);
    },
    change() {
      this.$emit('change', this.val);
      this.dispatch('ElFormItem', 'el.form.change', [this.val]);
    },
  },
};
</script>

<style>
/* 异常时的样式 */
.el-form-item.is-error input {
  border-color: #f56c6c;
}
</style>