Vue.js · Low Code · Element

Schema-Driven Virtual Tables: Bringing Element Plus TableV2 Under a Single Config

By 全栈小卷 · Nov 7, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

This schema-first approach removes the boilerplate of manually composing Element Plus TableV2 options, letting developers and AI generate complex data tables from a single configuration object. It also shows how to wrap third-party UI components into a declarative form engine, a pattern that could generalize to other component libraries.

Summary

JuanForm, a Vue 3 form engine, treats a virtual table as just another schema field. Developers declare columns with the same prop, label, and type pattern used for form controls, then layer on capabilities like grouped headers, hidden columns, custom editors, mode toggles, text formatting, variable row heights, tree expansion, and inline row additions. All of it lives in a config object, so neither the developer nor an AI helper needs to touch the underlying Element Plus TableV2 API.

The article walks through a beneficiary list with 5,000 rows. It shows how to define nested column groups, hide columns conditionally, split a name column into two inputs with a custom editor, add operation buttons that open dialogs, switch between control and text modes, format phone numbers with a country code prefix, and render HTML description cells with estimated row heights. Tree data comes from a children array with an expand key, and a computed expression shows a row's depth. Adding rows works on both top level and nested levels. The engine also supports extending built-in components through createInput, used here to build a custom recognition dialog that parses pasted text into row fields. The whole pattern aims to make complex admin pages describable, so developers or AI can generate them from configuration.

Takeaways

— JuanForm integrates Element Plus's TableV2 as a VTable field type, with columns declared using prop, label, and type.

— Grouped headers support arbitrary nesting through children, and only leaf columns with prop enter the data model.

— Hidden columns use a hidden function that can react to current row or form state; hiding a column also removes its data field.

— Custom cells are defined with a custom property containing items and optional dependsOn logic to split and recombine data (e.g., splitting a full name into first and last).

— Operation columns use custom items with buttons that inject list, dialog, or schema helpers to delete rows, open edit dialogs, or mutate data.

— A mode prop toggles columns between control (input) and text (display) states; the action column stays unaffected.

— Text columns can use a formatter function to display formatted values (e.g., adding a country code prefix) without altering the underlying data.

— Variable row heights are supported via HtmlText columns and an estimatedRowHeight prop on the VTable.

— Tree rows use a children array and an expandColumnKey to show expandable hierarchies; child rows have a $parent reference but can access form state through $root.

— An expression property on a column can compute derived values, such as tree depth.

— Adding rows is done by injecting a list helper for top-level adds or pushing to scope.children for child adds.

— Custom components like a recognition dialog can be built by extending Dialog through createInput, with slots, methods, and state handling.

Conclusions

By turning a virtual table into a schema field, JuanForm lets developers reuse one configuration vocabulary across forms and complex data views, which cuts down context switching.

The pattern of extending built-in components via createInput points toward a meta-framework where UI features are composed through configuration and small JavaScript hooks, a fit for low-code and AI-assisted development.

The article demonstrates practical accommodations: when a grouped header loses all but one child, the group is flattened, showing that the schema engine actively reshapes the UI based on data, not just renders a static map.

Concepts & terms

Schema-driven UI

A pattern where the structure and behavior of a user interface are defined in a data object (schema) rather than in imperative code. A rendering engine interprets the schema to produce the UI, allowing features to be added or modified by editing configuration.

Virtual scrolling

A rendering technique that only mounts the DOM nodes for rows currently visible in the viewport, plus a small buffer. It keeps the browser responsive when displaying thousands of rows, at the cost of more complex measurement logic for variable row heights.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗