element-pro-components

The Form component is a container used to collect, verify, and submit data. It is designed to work with any component that supports value binding via v-model.

Supported components include:

• el-input
• el-switch
• Standard input elements
• radio, select, checkbox, and more.

Unsupported components:

• Components that do not support v-model binding (e.g., el-upload) require custom implementation or rewriting to be compatible with the Form component.

element-pro-components is a component library designed for Vue 3. It is built upon element-plus, vue, and vue-router.

The library focuses on encapsulating non-business logic into reusable components, specifically targeting forms and tables. A key feature is the conversion of verbose el-table-column and el-form-item structures into dynamic column attributes. By passing in a reactive array of column configurations, tables and forms can update automatically, enabling easier implementation of features like dynamic permissions.

The Crud component supports accessing or setting values within nested object or array structures. To use a nested path, simply configure the prop attribute with the dot notation path.

// Accessing a nested property
const columns = [
  { prop: 'user.address.city', label: 'City' }
];

By default, checking a parent node automatically selects all its children, and unchecking a child affects the parent. Set the check-strictly attribute to true to decouple this behavior. When enabled, the checked state of a node will not affect its father or child nodes.

<TreeSelect
  v-model="checkedValues"
  :data="treeData"
  check-strictly
/>

The library does not provide built-in authentication-based route filtering. To implement protected routes (Auth Routing), you must manually manage which routes are visible to the menu and accessible to the user.

Recommended approaches:

1. Dynamic Filtering: When generating or adding routes, filter out any route objects that the user does not have permission to access.
2. Navigation Guards: Use router.beforeEach to intercept navigation and check permissions.
3. Hybrid: Combine both methods for maximum security and UI consistency.

To generate a grouped table header (multi-level header), add a children array to a column definition. This will automatically nest the child columns under the parent header.

const columns = [
  {
    label: 'Group Header',
    children: [
      { prop: 'col1', label: 'Sub Col 1' },
      { prop: 'col2', label: 'Sub Col 2' }
    ]
  }
];

The Table component supports retrieving values from nested object or array structures. To access a nested property, configure the prop attribute using dot notation.

// If your data is { user: { name: 'John' } }
const columns = [
  { prop: 'user.name', label: 'User Name' }
];

The Card component supports a grid-based layout system similar to el-row and el-col.

• The outer pro-card acts as a row (el-row).
• Nested pro-card components act as columns (el-col).

When nesting Cards, you can use layout-specific props like split, gutter, direction, justify, and align to control the internal grid behavior. Setting split to true enables an enhanced split-card layout for nested items.

<!-- Conceptual nesting pattern -->
<pro-card>
  <pro-card :span="12" />
  <pro-card :span="12" />
</pro-card>