DOCSEARCHbyAlgolia
Submit Docs

@silver-formily/element-plus

website·Indexed 30 days ago

https://element-plus.silver-formily.org

A reworked component library based on @formily/element-plus that provides an out-of-the-box form solution. It integrates the visual behavior of Element Plus with the configuration flexibility of Formily, offering a suite of components including FormDialog, PickerSelect, SelectTable, and various refactored input and picker components for complex form development.

Tokens
112.7K
Snippets
461
Records
586
Agent score
49%

What's inside Silver Formily Element Plus

  1. Overview of ArrayTable component

    ArrayTable is a high-performance table component optimized for large datasets within Schema-based scenarios. It is specifically designed for object arrays and prevents input lag even when handling massive amounts of data.

    Key Constraints & Caveats:

    • Schema Only: This component only works within Schema scenarios and only supports object arrays.
    • Validation Limitation: Formily only validates registered Fields. Rows that have not yet been rendered are not registered and therefore will not be validated. To ensure all data is validated, avoid bulk-loading data via setInitialValues and instead use the ArrayTable.Addition component to add entries one by one.
    • Pagination Component: The built-in pagination is a fork of Element Plus v2.9.11. For localization/language changes, wrap the component in el-config-provider.

  2. Overview of FormLayout

    FormLayout is a block-level layout controller for groups of fields. It allows developers to control the layout mode of every FormItem wrapped within it. By default, it renders as a <form> element via the tag prop to maintain HTML semantics, but this can be overridden if only layout behavior is needed.

  3. Overview of ArrayTable component

    ArrayTable is a high-performance table component designed for managing large datasets with incremental row updates. It is specifically intended for Schema-based scenarios and only supports arrays of objects.

    Key Constraints & Behaviors:

    • Validation: Validation only runs for rows that have been rendered. Fields that are not yet registered (unrendered) cannot participate in validation. To ensure all fields are registered correctly, it is recommended to add data via the "add item" button rather than inserting massive datasets all at once.
    • Pagination: The component uses a built-in fork of the Element Plus pagination component (from version 2.9.11). To change the default language of the pagination, wrap the component with ElConfigProvider.

  4. Overview of PreviewText component

    PreviewText is a renderless configuration component used to render the display (read-only) mode for form components such as Input and DatePicker.

    Important refactoring notes:

    • PreviewText.Placeholder and PreviewText.usePlaceholder have been removed.
    • Placeholders no longer support VNodes.
    • The component no longer provides preview rendering directly but acts as a configuration layer.

  5. Overview of @silver-formily/element-plus

    @silver-formily/element-plus is designed for teams who want to maintain the Element Plus visual system while leveraging Formily's powerful Schema expression and orchestration capabilities. It is particularly useful for large business systems requiring stable, testable form component sets and configuration-based form behavior via DSL. It serves as an alternative for users who encountered interaction, dependency, or extensibility bottlenecks with the original @formily/element-plus.

  6. Overview of FormGrid component

    FormGrid is a thin wrapper around @silver-formily/grid. When using this component in Vue, it is recommended to import createGrid from @silver-formily/grid and ensure it returns a markRaw FormGrid instance. This prevents listeners like shouldVisible from triggering infinite reactive loops.

  7. Overview of SelectTable component

    The SelectTable component provides a table-based selection interface.

    Key Constraints & Behaviors:

    • rowKey is a required property. Unlike standard Element-Plus, it only supports a string and does not support functions.
    • Tree-style selection is currently not supported.
    • Value Types: When mode is set to single, the value is a single item. When mode is set to multiple, the value is an array.

  8. Overview of Select Table component

    The SelectTable is a table-based picker component.

    Key Constraints:

    • rowKey is required and must be a string value; function values are not supported.
    • Tree selection is currently not supported.

    Selection Modes:

    • mode: 'single': The value is a single value.
    • mode: 'multiple': The value is an array.

  10. Overview of @silver-formily/element-plus

    @silver-formily/element-plus provides a Schema-based DSL that combines domain models with metadata-driven programming to reduce the cost of developing and maintaining complex forms. It is specifically designed for teams using the Element Plus visual system who need powerful orchestration capabilities, stable and testable form components, or a more extensible alternative to the original @formily/element-plus library.

  11. Overview of FormGrid component

    The FormGrid component is a wrapper around the @silve-fomily/grid component. It is used to create responsive grid layouts for form fields. When using it in Vue, it is recommended to import createGrid from @silve-fomily/grid to obtain a markRaw instance of the formGrid; failing to use markRaw may cause infinite loops in listener functions such as shouldVisible.

  12. Overview of FormDrawer

    FormDrawer is a drawer-based form component designed for simple event-driven form scenarios. It has been refactored to move away from ID-based context passing, instead utilizing Vue's JSX slot syntax to provide access to the form instance.