回车换行 enter换行 键盘上下箭头控制数据移动-el-table

2,082 阅读1分钟

1.需求描述

el-table中行中某一行中input回车(enter);会带出商品弹窗;通过上下箭头可控制弹窗中产品上下移动到视图、回车后数据落到底层table当前行中

然后底层table自动聚焦到当前行的下一个input中、遇到最后一个input回车时、做如下判断;

**当前行最后一个input回车时;判断当前行是否有数据;**

  **无数据:聚焦到当前行第一个input;不新增行**

  **有数据:新增行**

2.功能拆分:

1.回车换行 2.回车调起弹窗、默认高亮选中弹窗中第一条数据

3.在弹窗中、通过键盘上下箭头按下;弹窗中数据自动切换、且高亮出现在第一个位置

4.弹窗中此时已经选中数据、回车后、数据落到底层table对应的行中、此时底层焦点自动聚焦到下一个input

3.实现思路:

table中构造: 父元素往内构造如下 tbody->tr->td->div->div..->input

页面input如下:

故把当前input绑定ref 通过this.refs[inputPrefrefs[`inputPref{this.activeLineIndex}`].$el 获取Vue实例关联的DOM元素

dom如下:

以此往上找此input父元素td的dom;然后找父元素td相邻的td;相邻td再往内找input;找到就聚焦;以此类推 找不到就新增行(换行)

3个方法如下:

4.页面使用

5.鼠标上下箭头控制行上移下移

思路:监听键盘按键