forked from mengyxu/noob-components
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
3.3 KiB
98 lines
3.3 KiB
3 months ago
|
# 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)
|
||
|
|
```typescript
|
||
|
|
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
|