vue+element-ui 实现table单元格点击编辑,并且按上下键移动

news/2024/7/11 1:33:00 标签: javascript, vue.js, es6

1.接到需求是点击键盘上下键,控制输入框移动方便输入数据
table
2.相关实现代码

javascript"><el-table-column label="档距(m)" prop="span" width="120" align="center">
   <template slot-scope="scope">
     <el-input size="mini"  placeholder="请填写值"
     :value="scope.row.span"
     @input="handlerNumberChange($event,scope.row)"
     @click.native="handleNative"
    />
   </template>
 </el-table-column>
 
 //==============
 handleNative(){
      const len = this.list.length ;
      document.onkeydown = (v)=>{
        if (document.activeElement.nodeName.toLocaleLowerCase() !== "input") {
          return document.onkeydown = null;
        }
        let curel = document.activeElement ; //文档中当前获得焦点的元素
        while(curel.nodeName.toLocaleLowerCase() !== "td" &&  curel.nodeName.toLocaleLowerCase() !== "body") {
            curel = curel.parentElement
        }
        if (curel.nodeName.toLocaleLowerCase() === "body") {
          return  document.onkeydown = null;
        }
        const curcellIndex = curel.cellIndex; // 当前元素列单元格索引
        // 当前所在table(this.list) 的行的index : sectionRowIndex 
        let index = curel.parentElement.sectionRowIndex ;
        let curtbody = curel.parentElement; //当前tbody内容的整个表单
        while(curtbody.nodeName.toLocaleLowerCase() !== "tbody") {
            curtbody = curtbody.parentElement
        }

        const rowItem = i => curtbody.children[i].children[curcellIndex] ;
        // 13 enter| 40 下 |  38 上
        let flag = false;
        if (v.keyCode === 40 || v.keyCode === 38) {
          flag = true
          this.oldInputNode = rowItem(index).getElementsByTagName('input')[0];
          this.oldRow = this.list[index] ;
        }
        
        if (v.keyCode === 40) {
            index += 1;
          if (index === len) {  index = 0  } 
        }
        if (v.keyCode === 38) {
          index -= 1
          if (index < 0 ) {  index = len - 1 } 
        }
        if (flag) {
          const inputNode = rowItem(index).getElementsByTagName('input')[0] ;
          if (inputNode.dataset.disabled) {
            this.oldInputNode && this.oldInputNode.blur()
          }else{
            inputNode.focus() ;
          }
          this.$refs.table.setCurrentRow(this.list[index]) ;
        }  
      }
    },

参考:https://www.cnblogs.com/Tohold/p/9559092.html


http://www.niftyadmin.cn/n/1367775.html

相关文章

vue + element ui时 调用toggleRowSelection不生效

使用vuex存当前row&#xff0c;getters取row去其它组件回来时toggleRowSelection(row, true)不生效应该是函数return 取值形成了闭包&#xff0c;在操作页面遍历找到对应row&#xff0c;重新调用即可&#xff01; 主要代码 computed: {getHomePageRow () {return this.$store.…

js防抖节流

// 使用场景&#xff1a;防止狂点 function debounce(fn,delay500){// 使用vue的话, debounce.timer 换成 this.timer debounce.timer && clearTimeout(debounce.timer) ;debounce.timer setTimeout(()>{// fn....debounce.timer null},delay) }throttle (func, d…

js的this理解

function log () {console.log(this) } let obj {} obj.sonobj {son: } obj.log log obj.sonobj .log log obj.log() // {sonobj: {…}, log: ƒ} obj.sonobj .log() // {son: " ", log: ƒ}总结&#xff1a;谁直接调用this就是谁&#xff0c;不管它是不是在调用…

vue接入点聚weboffice打开在线文档报系统错误

运行官方的demo能正常打开线上文档放到vue打开就报错打开demo一行一行的排查解决bug:组件初始化需要调用一下weboffice.OptionFlag | 128; 相关代码&#xff1a; // weboffice 组件 <object ref"weboffice" :heightheight :widthwidth stylelet: 0px; top: 0px …

读书笔记:js中的null 和 undefined 的区别

1.在JS中 null和 undefined 都表示空&#xff0c;但它们还是存在一定区别的&#xff0c; null 表示不存在、没有&#xff0c;而 undefined 表示未定义。 2.底层实现时&#xff0c; null 一般会指向一个全 0 的地址&#xff0c;当 然&#xff0c;这个地址是无法访问的&#xff…

document的只读属性

1. domain&#xff1a; 当前文档的域名2. URL &#xff1a;当前文档 url3. referrer&#xff1a; 当前文档的前一个页面的url4. anchors&#xff1a; 当前文档的所有锚点&#xff08;a 标签&#xff09;5. forms &#xff1a;当前文档中的所有表单6. images &#xff1a;当前文…

不想用原生滚动条,用Element-ui隐藏组件el-scrollbar

查看源码接受的props props: {native: Boolean, // 是否启用原生样式&#xff1b;默认falsewrapStyle: {}, wrapClass: {}, // 标签样式 F12 查看viewClass: {}, viewStyle: {},noresize: Boolean, // 如果 container 尺寸不会发生变化&#xff0c;最好设置它可以优化性…

vue 使用 this.$forceUpdate()页面没有刷新

所遇问题&#xff1a; 使用了select、input组件,v-model后值更新了&#xff0c;页面数据未同步change事件调用this.$forceUpdate()&#xff0c;没有效果 解决办法&#xff1a;强制组件重新渲染 // 封装个forceUpdate方法 // 子组件在change调用 this.$emit(forceUpdate) // …