在vue环境中的操作dom实现excel的切换单元格效果

说明

        本文只是工作中出现此需求，本人认为好玩才写，技术一般所以留个笔记，主要是为了工作，提高用户体验

需求    

        根据公司运营的反馈，提供批量修改并自动提交功能。

        提供直接编辑，和自动提交功能。

        可编辑列：Appointment ID、Status、Scheduled Time、Arrival Time、Invoiced Status 五列

        编辑后失去焦点自动提交。 一般体验：可编辑列失去焦点，提交

        优化体验：同一行可编辑控件切换不提交，切换到不可编辑控件或切换到另一行才提交

        提供纯键盘操作的方案（参考Excel）： 回车（或向下方向键）：提交本行，并移动到下一行

        Shift+回车（或向上方向键）：提交本行并移动到上一行

        Tab（或向右方向键）：移动到右边的可编辑控件（如果右边没有则不移动）

        Shift+Tab（或向左方向键）：移动到左边的可编辑控件（如果左边没有则不移动）

        文本框失去焦点也提交
        有修改才提交，无修改不提交
        左右键在文本框内时移动光标（只有在文本最左边(或全选状态)时，按左键才切换到左边可编辑控件，在文本框最右边(或全选状态)时，按右键才切换到右边可编辑控件）

正文

这是本文的产品展示图

思路

1. 要实现失去焦点可以提交并且在有修改的情况，所以我们这里需要使用change事件
2. 因为左右键（arrowLeft/Right）需要在文本框中移动光标，所以我们不能禁用掉它自带的默认行为，为了监听到它，我们使用keydown事件
3. 我们的文本框位置是固定的，所以我给了个固定的数组以便存放标记下标，数组名为focusIndexList

实现过程

1. 给el-table-column中加入change事件，我给个示例1-1，这里仅仅是代表我个人写代码习惯
2. change里面的事件，就是触发接口进行修改的函数，这里我就不做示例，可以根据自身情况去修改
3. keydown事件中，我个人认为固