在 Element UI 表单中活用组件属性与校验功能，构建灵活易用的表单！

2024-01-27 05:00:03

1. 自定义组件属性继承：

Element UI 表单组件提供了 size、disabled 等属性，这些属性可以影响组件的外观和行为。当在表单中使用自定义组件时，您可以通过 props 属性传递这些属性，使自定义组件继承表单组件的属性值。

<el-form :size="size">
  <my-custom-component :size="size" />
</el-form>

2. 禁用自定义组件：

如果您想在表单中禁用自定义组件，可以使用 disabled 属性。在自定义组件中，通过 props 属性接收 disabled 值，并根据其值来决定是否禁用组件。

export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  render() {
    return <div :class="{ 'is-disabled': this.disabled }">...</div>;
  }
};

3. 表单校验集成：

Element UI 表单组件提供了强大的校验功能。当在表单中使用自定义组件时，您可以通过 rules 属性来配置自定义组件的校验规则。

<el-form :model="form" :rules="rules">
  <my-custom-component v-model="form.customComponentValue" />
</el-form>

在自定义组件中，您可以使用 validate 方法来触发校验，并在校验失败时抛出错误信息。

export default {
  methods: {
    validate() {
      this.$refs.input.validate();
    }
  }
};

4. 自定义组件与表单联动：

通过上述方法，您可以轻松实现自定义组件与表单属性、校验的协同工作。这样，您就可以在表单中无缝地使用自定义组件，并充分利用 Element UI 表单组件的强大功能。

5. 示例代码：

<template>
  <el-form :model="form" :rules="rules">
    <my-custom-component v-model="form.customComponentValue" />
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        customComponentValue: ''
      },
      rules: {
        customComponentValue: [
          { required: true, message: '请填写自定义组件的值', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交表单
        } else {
          // 表单验证失败，提示用户填写错误信息
        }
      });
    }
  }
};
</script>