172 lines
4.2 KiB
Markdown
172 lines
4.2 KiB
Markdown
# 表格拖拽多选功能
|
||
|
||
## 功能概述
|
||
|
||
表格组件现在支持拖拽多选功能，用户可以通过鼠标拖拽来快速选择多行数据，提升批量操作的效率。
|
||
|
||
## 功能特性
|
||
|
||
### ✅ 已实现的功能
|
||
|
||
1. **基础拖拽选择**
|
||
- 在表格行上拖拽可以选择多行
|
||
- 实时显示选择框和选中状态
|
||
- 拖拽结束后更新选中状态
|
||
|
||
2. **智能交互**
|
||
- 避免在复选框和操作按钮区域启动拖拽
|
||
- 设置最小拖拽距离阈值，避免意外触发
|
||
- 拖拽过程中禁用文本选择
|
||
|
||
3. **键盘修饰键支持**
|
||
- **Ctrl/Cmd + 拖拽**：追加选择模式（切换选中状态）
|
||
- **Shift + 点击复选框**：范围选择模式
|
||
- **Ctrl/Cmd + A**：全选
|
||
- **Escape**：取消拖拽或清空选择
|
||
|
||
4. **虚拟滚动兼容**
|
||
- 正确处理虚拟滚动的坐标转换
|
||
- 考虑滚动位置的行索引计算
|
||
|
||
5. **视觉反馈**
|
||
- 拖拽选择框的实时显示
|
||
- 选中行的高亮效果
|
||
- 拖拽过程中的样式变化
|
||
- 用户操作提示
|
||
|
||
## 使用方法
|
||
|
||
### 基本配置
|
||
|
||
```typescript
|
||
import { Table } from './base/table/Table';
|
||
import { RowSelection } from './base/table/types';
|
||
|
||
const rowSelection: RowSelection<Mark> = {
|
||
type: 'checkbox',
|
||
selectedRowKeys,
|
||
onChange: (selectedRowKeys, selectedRows) => {
|
||
// 处理选择变化
|
||
setSelectedRowKeys(selectedRowKeys);
|
||
},
|
||
dragSelection: {
|
||
enabled: true, // 启用拖拽多选
|
||
multi: true, // 支持多选
|
||
onDragStart: (startRowIndex) => {
|
||
console.log('开始拖拽选择');
|
||
},
|
||
onDragEnd: (selectedRows) => {
|
||
console.log('拖拽选择结束');
|
||
},
|
||
},
|
||
};
|
||
|
||
<Table
|
||
data={data}
|
||
columns={columns}
|
||
rowSelection={rowSelection}
|
||
// ... 其他属性
|
||
/>
|
||
```
|
||
|
||
### 配置选项
|
||
|
||
#### `DragSelectionConfig`
|
||
|
||
```typescript
|
||
interface DragSelectionConfig {
|
||
enabled?: boolean; // 是否启用拖拽选择，默认为 true
|
||
multi?: boolean; // 是否支持多选，默认为 true
|
||
onDragStart?: (startRowIndex: number) => void; // 拖拽开始回调
|
||
onDragEnd?: (selectedRows: Mark[]) => void; // 拖拽结束回调
|
||
}
|
||
```
|
||
|
||
### 用户操作指南
|
||
|
||
1. **基础拖拽选择**
|
||
- 在表格行（非复选框/操作按钮区域）按下鼠标左键
|
||
- 拖拽至目标行
|
||
- 释放鼠标完成选择
|
||
|
||
2. **追加选择**
|
||
- 按住 `Ctrl`（Windows/Linux）或 `Cmd`（Mac）键
|
||
- 进行拖拽选择
|
||
- 已选中的行会切换状态（选中变未选中，未选中变选中）
|
||
|
||
3. **范围选择**
|
||
- 先点击一个复选框选中一行
|
||
- 按住 `Shift` 键
|
||
- 点击另一个复选框
|
||
- 两行之间的所有行都会被选中
|
||
|
||
4. **键盘快捷键**
|
||
- `Ctrl/Cmd + A`：全选所有行
|
||
- `Escape`：取消当前拖拽操作或清空所有选择
|
||
|
||
## 技术实现
|
||
|
||
### 核心组件
|
||
|
||
1. **状态管理**
|
||
- `DragSelectionState`：管理拖拽状态
|
||
- 鼠标位置跟踪
|
||
- 选择范围计算
|
||
|
||
2. **事件处理**
|
||
- `handleMouseDown`：开始拖拽检测
|
||
- `handleMouseMove`：拖拽过程处理
|
||
- `handleMouseUp`：完成选择操作
|
||
|
||
3. **坐标转换**
|
||
- 虚拟滚动坐标映射
|
||
- 行索引计算
|
||
- 碰撞检测算法
|
||
|
||
### 样式类名
|
||
|
||
- `.row-selected`：选中行样式
|
||
- `.row-drag-selected`：拖拽选中行样式
|
||
- `.drag-selection-box`：拖拽选择框样式
|
||
- `.drag-hint`：操作提示样式
|
||
|
||
## 性能优化
|
||
|
||
1. **事件防抖**
|
||
- 设置拖拽距离阈值
|
||
- 避免频繁状态更新
|
||
|
||
2. **虚拟滚动适配**
|
||
- 只处理可视区域内的行
|
||
- 优化大数据量场景
|
||
|
||
3. **内存管理**
|
||
- 及时清理事件监听器
|
||
- 合理的状态重置
|
||
|
||
## 兼容性
|
||
|
||
- ✅ 支持现有的复选框选择
|
||
- ✅ 兼容虚拟滚动
|
||
- ✅ 支持排序和筛选
|
||
- ✅ 响应式设计
|
||
- ✅ 键盘导航友好
|
||
|
||
## 示例代码
|
||
|
||
查看 `DragSelectionExample.tsx` 文件获取完整的使用示例。
|
||
|
||
## 注意事项
|
||
|
||
1. 拖拽选择不会在复选框和操作按钮区域启动
|
||
2. 需要设置合适的行高以确保拖拽体验
|
||
3. 大数据量时建议启用虚拟滚动
|
||
4. 移动端设备可能需要额外的触摸事件处理
|
||
|
||
## 未来规划
|
||
|
||
- [ ] 触摸设备支持
|
||
- [ ] 自定义拖拽选择框样式
|
||
- [ ] 更多键盘快捷键
|
||
- [ ] 拖拽选择动画效果
|
||
- [ ] 选择统计和操作面板 |