vue 在table内用键盘事件(上下左右)选择单元格焦点

Question

通过他人帮助下实现了可编辑的表格,然后又实现了通过键盘事件在input移动.我尝试把它们结合起来,思路大概为:点击单元格触发单元格事件获得焦点:用键盘事件可以自由移动到其它单元格并获得焦点.虽然我意识到了键盘移动到下一个单元格的重点在于使得下一个单元格获得焦点,但实现的时候思路还是太乱了,理不清.还请各位高手指点一下晚辈.

下面这个是键盘事件在input移动

<template>


<el-container>
    <el-main>
      　　　<el-table  :data="tableData" border style="width: 100%" ref="table">
            <el-table-column align="center" prop="name" label="名称" width="150">
             </el-table-column>
                <el-table-column align="center" sortable prop="normalB" label="笔数">
                     <template scope="scope">
                        <span>
                        <el-input style="width: 90px" placeholder="笔数" v-model="scope.row.normalB" @change="handleCreditChange()" class="table_input normalB_input" @keyup.native="show($event,scope.$index)"></el-input>
                        </span>
                    </template>
                    </el-table-column>
                <el-table-column align="center" sortable prop="normalY" label="余额(万元)">
                <template scope="scope">
                    <span>
                    <el-input style="width: 90px" placeholder="余额" v-model="scope.row.normalY" @change="handleCreditChange()" @blur="handleBalanceBlur($event)" @focus="handleBalanceClear($event)" class="table_input normalY_input" @keyup.native="show($event,scope.$index)"></el-input>
                        </span>
                        </template>
                    </el-table-column>
                                

                            
                <el-table-column align="center" sortable prop="focusB" label="笔数">
                <template scope="scope">
                    <span>
                    <el-input style="width: 90px" placeholder="笔数" v-model="scope.row.focusB" @change="handleCreditChange()" class="table_input focusB_input" @keyup.native="show($event,scope.$index)"></el-input>
                    </span>
                 </template>
             </el-table-column>

        </el-table>
    </el-main>
</el-container>

                        </template>


<script>
export default {

    data() {
        return {
          data :'2',
          didata:'',
          iddata:'',
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
    },
    methods:{
//键盘触发事件
show(ev,index){
          
          let newIndex ;
          
          //通过ev 获取 当前input 名称 用于判断属于哪列
          let clssName = ev.target.offsetParent.className;
         
          //每一列
          if(clssName.indexOf('normalB_input') != -1){
              this.data = index
              this.didata = index*3 ;
              newIndex = index*3 ;
              
          } else if (clssName.indexOf('normalY_input') != -1) {
              this.data = index
              this.didata = index*3 + 1 ;
              newIndex = index*3 + 1 ;
              
          } else if (clssName.indexOf('focusB_input') != -1) {
              this.data = index
              this.didata = index*3 + 2;
              newIndex = index*3 + 2;
          }

        
   
        //获取所有input
        let inputAll = document.querySelectorAll('.table_input input');
        this.iddata = inputAll
        //向上 =38
        if(ev.keyCode == 38){
            //当焦点在第一行的时候 按向上的时候焦点要聚焦到前一列的最后一个
            if(newIndex >=1 && newIndex<=2){
                newIndex = newIndex + 8;
            } else {

                newIndex -= 3 ;
            }
            if( inputAll[newIndex] ){
                inputAll[newIndex].focus();
                
            }
            
        }
            
        //下 = 40
        if(ev.keyCode == 40){
            
            //当newIndex 在最后一行的时候 焦点要聚焦到 下一列的第一个
            if(newIndex>= 9 && newIndex<11){
              newIndex =  (newIndex%8)

            }else {
                newIndex += 3 ;
            }
            
            
            if( inputAll[newIndex] ){
                
                inputAll[newIndex].focus();
                
            }
            
        }
        
        //左 = 37
        if(ev.keyCode == 37){
            
           newIndex -= 1 ;
           
            if( inputAll[newIndex] ){
                
                inputAll[newIndex].focus();
                
            }
        }
        
        //右 = 39
        if(ev.keyCode == 39){
            newIndex =newIndex+1 ;
            
            if( inputAll[newIndex] ){
                
                inputAll[newIndex].focus();
                
            }
        }
      },
    }
}
</script>

下面这个是通过参考 https://segmentfault.com/q/10... 实现的
主要功能是点击单元格即变成编辑状态

<template>
<el-container>


<el-main>
    <el-table :data="tableData" size="mini" border @cell-click="celledit" style="width: 353px;height:455px"     row-style="height:20px" cell-style="padding:0" >
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="name" label="产品名称" width="122">
        <template slot-scope="scope">
     
            <el-autocomplete
            size = "mini"
            v-if="scope.row.name.edit"
             v-model="scope.row.name.value" 
             ref="name" style="width: 110px" 
            :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @blur="handleSelect(scope.row)"             
                ></el-autocomplete>
          <span v-else>{{ scope.row.name.value }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="number" label="数量" width="60px" edit="false">
        <template slot-scope="scope">
          <input  size="mini"   v-if="scope.row.number.edit" ref="number"  v-model="scope.row.number.value" style="width:45px;margin-left:150px; " @blur="scope.row.number.edit = false" >
          <span v-else>{{ scope.row.number.value }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="unit_price" width="60" label="单价">
        <template slot-scope="scope">
          <el-input  size="mini" v-if="scope.row.unit_price.edit" ref="unit_price"  v-model="scope.row.unit_price.value" style="width: 100%" @blur="scope.row.unit_price.edit = false"  ></el-input>
          <span v-else>{{ scope.row.unit_price.value }}</span>
        </template>
      </el-table-column>
       <el-table-column prop="moeny" width="60" label="金额">
        <template slot-scope="scope">
          <span >{{ scope.row.moeny.value }}</span>
        </template>
      </el-table-column>

    </el-table>



</el-main>




</el-container>

</template>





<script>


export default {
  data() {
    return {
      restaurants: [],
       tableData: [],
    };
  },
  created() {
    this.formatData()//调用生成表格
  },
   mounted() {
      this.restaurants = this.loadAll();//返回关键字
    },
  computed:{

    
    formatData(){ ////生成表格
        for  (var i=1;i<11;i++){
            this.tableData.push({"name":'',"number":'',"unit_price":'',"moeny":''})
        }
            this.tableData.forEach(item => {
              for( var key in item) {
                item[key] = {
                  value: item[key],
                edit: false
              }
            }
          })
        },
  },
  methods: {

      handleSelect(row,id){
         setTimeout(() =>{ //失去焦点的时候进行延迟
                  row.name.edit = false
              },170);
      },

      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
       loadAll() {
          return [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
          { "value": "贡茶", "address": "上海市长宁区金钟路633号" }]
       },
      
       
     
          celledit(row, column, cell, event){

            if(row[column.property]){
              row[column.property].edit = true
            setTimeout(() => {
                this.$refs[column.property].focus()
            }, 20)
           
          }
          
          }
  }
          
};
</script>