vue+element-ui 实现table单元格点击编辑,并且按上下键单元格之间切换

1.接到需求是点击键盘上下键,控制输入框移动方便输入数据
vue+element-ui 实现table单元格点击编辑,并且按上下键单元格之间切换
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

上一篇:html 两个元素的最近的公共父元素


下一篇:react介绍和安装+小案例