Override Built-in Components

Override built-in components by mounting components with the same name using the formCreate.component() method. This lets you fully customize the behavior and appearance of built-in components to meet specific business requirements.

Get formCreate Object

Before using formCreate.component(), you need to obtain the formCreate object. You can get it in the following ways:

• Import from the designer package: import { formCreate } from 'path/to/fcDesignerPro'
• Get from the designer instance: FcDesigner.formCreate

Basic Usage

Override a Single Component

import formCreate from '@form-create/element-ui';
import CustomInput from './CustomInput.vue';

// Override the built-in input component
formCreate.component('input', CustomInput);

Override Multiple Components

import formCreate from '@form-create/element-ui';
import CustomInput from './CustomInput.vue';
import CustomSelect from './CustomSelect.vue';

// Override multiple built-in components
formCreate.component('input', CustomInput);
formCreate.component('select', CustomSelect);

Usage Examples

Example 1: Override Input Component

Create a custom input component with auto-formatting functionality:

<!-- CustomInput.vue -->
<template>
  <el-input
    :modelValue="formattedValue"
    @update:modelValue="handleChange"
    v-bind="$attrs"
  />
</template>

<script>
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'CustomInput',
  props: {
    modelValue: [String, Number],
    disabled: Boolean,
    // Add custom property: auto-formatting
    autoFormat: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'change'],
  setup(props, { emit }) {
    // Format the value (e.g., automatically add thousand separators)
    const formattedValue = computed(() => {
      if (!props.autoFormat || !props.modelValue) {
        return props.modelValue;
      }
      // Formatting logic
      return String(props.modelValue).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    });

    const handleChange = (val) => {
      // Remove formatting characters
      const rawValue = props.autoFormat 
        ? val.replace(/,/g, '') 
        : val;

        emit('update:modelValue', rawValue);
      emit('change', rawValue);
    };

    return {
      formattedValue,
      handleChange
    };
  }
});
</script>

Override the built-in component at application startup:

// main.js
import formCreate from '@form-create/element-ui';
import CustomInput from './components/CustomInput.vue';

// Override the built-in input component
formCreate.component('input', CustomInput);

Example 2: Override Select Component

Create a custom select component with search and remote loading functionality:

<!-- CustomSelect.vue -->
<template>
  <el-select
    :modelValue="modelValue"
    @update:modelValue="handleChange"
    filterable
    remote
    :remote-method="remoteMethod"
    :loading="loading"
    v-bind="$attrs"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import { defineComponent, ref } from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'CustomSelect',
  props: {
    modelValue: [String, Number, Array],
    disabled: Boolean,
    // Custom property: remote search API endpoint
    remoteUrl: String
  },
  emits: ['update:modelValue', 'change'],
  setup(props, { emit }) {
    const options = ref([]);
    const loading = ref(false);

    const remoteMethod = async (query) => {
      if (!props.remoteUrl) {
        return;
      }

      loading.value = true;
      try {
        const response = await axios.get(props.remoteUrl, {
          params: { keyword: query }
        });
        options.value = response.data;
      } catch (error) {
        console.error('Failed to load options:', error);
      } finally {
        loading.value = false;
      }
    };

    const handleChange = (val) => {
      emit('update:modelValue', val);
      emit('change', val);
    };

    return {
      options,
      loading,
      remoteMethod,
      handleChange
    };
  }
});
</script>

Override the built-in component:

// main.js
import formCreate from '@form-create/element-ui';
import CustomSelect from './components/CustomSelect.vue';

// Override the built-in select component
formCreate.component('select', CustomSelect);

Using in Designer

After overriding a built-in component, all places in the designer that use that component automatically use your custom component:

// Use the overridden component in form rules
const rule = [
  {
    type: 'input',  // Use the overridden custom input component
    field: 'username',
    title: 'Username',
    props: {
      autoFormat: true  // Use custom property
    }
  },
  {
    type: 'select',  // Use the overridden custom select component
    field: 'category',
    title: 'Category',
    props: {
      remoteUrl: '/api/categories'  // Use custom property
    }
  }
];

Notes

Important Notes

1. Component names must match exactly: When overriding built-in components, the component name must exactly match the built-in component identifier. Common built-in component identifiers include: input, select, elButton, textarea, radio, checkbox, etc. See the Built-in Components List for the complete list.

2. Override timing: formCreate.component() should be called at application startup to ensure the override is completed before any form instances are created.

3. Component specifications: Custom components must follow FormCreate's component specifications, including:

   • Must support modelValue and update:modelValue (v-model two-way binding)
   • Must support the disabled property
   • Must emit the change event
   • Use v-bind="$attrs" to pass through other properties

4. Backward compatibility: When overriding components, it is recommended to maintain the same API interface as the built-in components to ensure existing form rules continue to work properly.

5. Global impact: Overriding built-in components affects all places in the application where that component is used. Use with caution.

This approach allows you to fully customize built-in component behavior while maintaining compatibility with FormCreate.