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.{this.activeLineIndex}`].$el 获取Vue实例关联的DOM元素
dom如下:
以此往上找此input父元素td的dom;然后找父元素td相邻的td;相邻td再往内找input;找到就聚焦;以此类推 找不到就新增行(换行)
3个方法如下:
4.页面使用
5.鼠标上下箭头控制行上移下移
思路:监听键盘按键