list-table-v2.vue - el-table-v2 Migration

Goal

Create packages/base/data/list-table-v2.vue - a new table component using Element Plus el-table-v2 (virtual table) with auto-resizer support, while keeping list-table.vue unchanged for backward compatibility.

Requirements

1. Use el-table-v2 (virtual scrolling)

Use el-table-v2 from Element Plus instead of el-table
Enable virtual scrolling for performance with large datasets
Support auto-resizer via autosize prop

2. Auto-fill Container Height

Use el-table-v2's autosize prop for automatic height sizing
Flexbox fallback if autosize insufficient (avoid hacks from original)
Component should fill available space in flex containers

3. Maintain API Compatibility with list-table.vue

Props to support:

Prop	Type	Description
`data`	`any`	Table data (array or PageResponse)
`columns`	`TableColumn[]`	Column definitions
`page`	`boolean`	Enable pagination
`height`	`number \| string`	Optional explicit height (falls back to auto if undefined)
`maxHeight`	`number \| string`	Max height constraint
`example`	`any`	Pagination state object
`rowKey`	`string`	Row key for selections
`selectKey`	`string`	Key for pre-selecting rows
`border`	`boolean`	Show border
`lazy`	`boolean`	Lazy loading for tree data
`treeProps`	`any`	Tree data configuration

Events to emit:

query - pagination changed
selection-change - selection changed
row-click - row clicked
cell-click - cell clicked

Column features:

code - property name
name / i18n - label
type - column type (selection, index, etc.)
width / minWidth - column width
fixed - fixed column (left/right)
align - text alignment
slot - custom slot for rendering
dict - dictionary lookup for value formatting
timestamp - format as datetime
filesize - format as file size

4. Keep list-table.vue Unchanged

Existing component remains for backward compatibility
No breaking changes to existing usage

5. Theming Compatibility

Use Vuex store for theme values (style, size)
Same CSS variable overrides for colors, backgrounds

Technical Notes

el-table-v2 Key Differences

Uses columns prop instead of scoped slots for header
cellRenderer for custom cell rendering
headerCellRenderer for custom header rendering
autosize accepts { minHeight: number, maxHeight: number }
Virtual scrolling is always on (no separate prop)

TableColumn Type (from useListTable.ts)

export interface TableColumn {
  code: string;
  name?: string;
  i18n?: string;
  type?: string;
  width?: string | number;
  fixed?: boolean | "left" | "right";
  align?: "left" | "center" | "right";
  slot?: boolean;
  dict?: string;
  timestamp?: boolean;
  filesize?: boolean;
  [others: string]: any;
}

Acceptance Criteria

list-table-v2.vue created in packages/base/data/
Uses el-table-v2 with virtual scrolling
Auto-fills container height (autosize or flex)
All column features work (dict, timestamp, filesize, slot, etc.)
Pagination support via page prop
Theme/styling compatible with existing list-table
No breaking changes to existing list-table.vue
TypeScript compilation passes

3.3 KiB Raw Blame History