# 单页面多组件快捷键联动操作

**Repository Path**: kodt/tableOpera

## Basic Information

- **Project Name**: 单页面多组件快捷键联动操作
- **Description**: 快捷键操作
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-02
- **Last Updated**: 2025-03-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 单页面多组件快捷键联动操作实现方案

#### 背景介绍
页面中存在大量表格关联数据，为了提高用户查看单条数据的效率，设计快捷键联动操作功能。用户只会关注组件L4的数据。
当前页面中，存在4个需要用快捷键联动操作的组件，其中三个是表格组件，第四个是具有指示器的图片组件。
1. 表格组件L1： 具有合并单元格，需要针对单元格进行上下左右快捷键操作。
2. 表格组件L2： 需要支持上下快捷键操作，针对单元行操作。
3. 表格组件L3： 需要支持上下快捷键操作，针对单元行操作。
4. 组件L4： 每次展示两张图片，需要鼠标移入区域时展示左右指示器，支持点击以及指示器出现时的左右快捷键操作。
![输入图片说明](image.png)
![输入图片说明](image2.png)

其中表格数据也具有一定的链路：
点击|指示器处于L1表格中某列的单元格 -> L2数据
点击|指示器处于L2数据中的某一行 ->  L3数据
点击|指示器处于L3中的某一行 -> L4数据
![输入图片说明](image3.png)

联动场景：
1. 指示器处于 L2表格第一页的第一条时， 用户操作 ↑ 方向键， 会加载L1的上一条数据，并将指示器处于L2的最后一页最后一条数据。
2. 指示器处于 L2表格最后一页的最后一条时，用户操作⬇️方向键，会加载L1的下一条数据，并将指示器处于L2的第一页第一条数据。
3. L3表格同理
4. L4表格左右操作等同于L3表格的上下操作。

![输入图片说明](image4.png)

#### 注意点
1. 针对L1表格，具有合并单元格，在快捷键操作时,不能只对指示器坐标进行单纯地加减，还需要注意空洞单元格（如图所示，表格中不存在的对应的行列单元格）
![输入图片说明](image6.png)
2. L3表格的联动操作会影响到L2，而L2的联动操作会影响到L1。
3. L4的快捷键操作只有指示器显示时能够进行。
4. 对表格筛选或排序时， 如果指示器在当前操作的表格， 将指示器位置重置为第一行。

#### 解决方案
采用访问者，统一收集并处理L1-4的数据，以及快捷键移动逻辑。表格组件负责信息上报以及渲染。
![输入图片说明](image7.png)

#### 需要收集的数据
1. 表格数据 tableData
2. 分页数据 paginationInfo
3. 表格数据请求方法

#### 快捷键操作
1. 监听快捷键
2. 销毁快捷键(可以采用 controllerAbort 方法控制)
3. 指示器移动的方法（指示器移动后的坐标)
4. 空洞元素判断方法(递归到非空洞元素位置)
5. 表格重渲染方法(防止同时有多个指示器存在在页面上)