Vue + Element 自定义表单组件

在 Vue 中自定义 Element 表单组件的基本步骤如下：

1. 自定义组件需要支持v-model，在组件内部接受一个valueprop，使用input事件更新父组件的数据

<template>
  <el-input v-model="inputValue" @input="handleInput" placeholder="请输入内容"></el-input>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      inputValue: this.value,
    };
  },
  methods: {
    handleInput(value) {
      this.$emit("input", value);
    },
  },
};
</script>

2. 在自定义组件中能够触发 Element 的表单验证

引入 Element 中触发表单验证的$dispatch方法

<script>
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.componentName;
        }
      }
       
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    }
  }
}
</script>

在组件状态发生变化时触发$dispatch验证

<script>
export default {
  methods: {
    handleInput(value) {
      this.$emit("input", value);
      this.dispatch("ElFormItem", "el.form.change", [value]);
    },
  }
}
</script>