Skip to main content
Version: Next

Data Display Components

Table of Contents​

  1. Introduction
  2. Project Structure
  3. Core Components
  4. Architecture Overview
  5. Detailed Component Analysis
  6. Dependency Analysis
  7. Performance Considerations
  8. Troubleshooting Guide
  9. Conclusion

Introduction​

This document aims to provide an in-depth analysis of the technical implementation of the lmes-web-base data display components. It focuses on the integration architecture of BaseTable with vxe-table, the collaboration mechanism of custom Hooks, the implementation principles of auxiliary functions, and application patterns in complex MES data scenarios. Through actual business cases, it provides configuration examples for high-performance data tables, covering production-grade features such as responsive layout adaptation, export function integration, and error boundary handling.

Project Structure​

The lmes-web-base project structure is clear, with main components located in the src/components directory. The core components related to data display include BaseTable, TableFilter, CsTree, and Flow. These components achieve a high-cohesion, low-coupling architecture through modular design.

Diagram sources

Section sources

Core Components​

The core of the data display components is BaseTable, which encapsulates the a-table component and provides rich configuration options and extension functions. The TableFilter component is used to implement table filtering functions, while CsTree and Flow components are used for tree structures and flow view rendering, respectively.

Section sources

Architecture Overview​

The BaseTable component separates column configuration, state management, and event handling through the Composition API. Three custom Hooks, useColumns, useState, and useEvent, are responsible for column rendering, state maintenance, and event handling respectively, improving code maintainability and testability.

Diagram sources

Detailed Component Analysis​

BaseTable Analysis​

The BaseTable component is the core of data display. It creates shared state via createState, handles events via useEvent, and renders column content via ColumnSlots.

Column Configuration (useColumns)​

The useColumns Hook handles column configuration and rendering. It generates column slot mappings via the ColumnSlots function, supporting custom rendering and scoped slots.

Diagram sources

State Management (useState)​

The useState Hook implements two-way data binding via useVModels, managing states such as table data source, selected rows, and pagination parameters. provide and inject are used to pass state throughout the component tree.

Diagram sources

Event Handling (useEvent)​

The useEvent Hook handles events such as table row clicks, column resizing, and selection. Column resize events are debounced using debounce to improve performance.

Diagram sources

TableFilter Analysis​

The TableFilter component provides table filtering capabilities, supporting dynamic addition of filter conditions. It works with BaseTable to implement data filtering.

Diagram sources

CsTree Analysis​

The CsTree component implements a tree structure selector based on el-tree-select, suitable for scenarios requiring selection of tree data.

Diagram sources

Flow Analysis​

The Flow component is used to display process tags, supporting multi-selection and disabled states, suitable for displaying process information such as process routes.

Diagram sources

Dependency Analysis​

The data display components depend on libraries such as @arco-design/web-vue, vue, and lodash. BaseTable depends on a-table, CsTree depends on el-tree-select, and Flow depends on the Tag component.

Diagram sources

Section sources

Performance Considerations​

  • Virtual Scrolling: BaseTable supports virtual scrolling, enabled via the virtual-list-props attribute, suitable for large data volume scenarios.
  • Lazy Loading: CsTree supports lazy loading to reduce initial load time.
  • Node Caching: dataSourceMap uses Map to cache data sources, improving lookup performance.
  • Debouncing: The onColumnResize event uses debounce to avoid frequent triggers.

Section sources

Troubleshooting Guide​

  • Table No Data: Check if dataSource is correctly bound and confirm the API return data format.
  • Filter Invalid: Confirm tableRef is passed correctly and the getList method exists and is callable.
  • Tree Selector Not Displaying: Check if the namespace of el-config-provider is set correctly.
  • Flow Tags Not Updating: Confirm modelValue two-way binding is correct and emit events are triggered.

Section sources

Conclusion​

The lmes-web-base data display components achieve high-performance, easily extensible data display functions through modular design and Composition API. The integration architecture of BaseTable with vxe-table, combined with the collaboration mechanism of custom Hooks, provides powerful support for complex MES data scenarios. Through configuration examples of actual business cases, developers can quickly get started and build efficient data display interfaces.

Last updated on