标签：vue parentElement 单元格 value element curRowIndex input curtbody children

1.接到需求是点击键盘上下键，控制输入框移动方便输入数据

2.相关实现代码

<el-table-column label="Pageviews" width="110" align="center">
   <template slot-scope="scope">
     <el-input-number
       style="width:90%"
       :controls="false"
       :min="0"
       @input.native="inputChange($event,scope.$index)"
       @change="(currentval,oldval)=>onChange(currentval,oldval,scope)"
       v-model="scope.row.pageviews"
       size="mini"
     />
   </template>
 </el-table-column>
 

    _handleInputChange(value) {
        const newVal = value === '' ? undefined : Number(value);
        if (!isNaN(newVal) || value === '') {
            return newVal
        }
        return 0
    },
    inputChange(e,i){
      const value = this._handleInputChange(e.target.value)
      this.$set(this.list[i],'pageviews',value);
    },
    onChange(newval,oldval,scope){
      document.onkeydown =  (e) => {
          var curel = document.activeElement.parentElement.parentElement.parentElement; //当前元素
          var curcellIndex = curel.parentElement.cellIndex; // 当前元素行单元格索引
          var curRowIndex = curel.parentElement.parentElement.sectionRowIndex; //当前元素行的索引；

          var curtbody = curel.parentElement.parentElement.parentElement.children; //当前tbody内容的整个表单
         

          if (e.keyCode == 38) {
            this.$set(this.list[scope.$index],'pageviews',oldval);
            //按上键
            if (curRowIndex - 1 < 0) {
              curtbody[curtbody.length - 1].children[
                curcellIndex
              ].getElementsByTagName('input')[0].focus();
              
            } else {
              curtbody[curRowIndex - 1].children[
                curcellIndex
              ].getElementsByTagName('input')[0].focus();
            }
          } 
             else if (e.keyCode == 40 || e.keyCode == 13) {
            //向下按钮按键
            e.preventDefault();
            this.list[scope.$index].pageviews = oldval;
            
            if (curRowIndex + 1 == curtbody.length) {
              curtbody[0].children[curcellIndex].getElementsByTagName('input')[0].focus();
            } else {
              const td = curtbody[curRowIndex + 1].children[
                curcellIndex
              ].getElementsByTagName('input')[0];
              td.focus()
            }
          }
        }
      
    },

3.其他

• 因为上下键切换，组件值会发生改变，所以相应在onChange函数强行把值绑定回来
• 不知道为啥鼠标点击手动输入时不会触发v-model，所以用了inputChange绑定值，组件el-input-number的number检测就没啥用了，直接换成el-input组件document.onkeydown还可以少写些单词了，不过懒了，这就不改了
• 实现思路①一开始打算试试动态改变tabindex；②后面看见有现成的大佬博主内容（相当于用鼠标在点击-聚焦）就改造改造了，非常感谢！

原文：https://www.cnblogs.com/Tohold/p/9559092.html

标签：vue,parentElement,单元格,value,element,curRowIndex,input,curtbody,children
来源： https://blog.csdn.net/qq_42220283/article/details/118067972

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。