el-table 设置当前行，按回车键自动选中下一行

妖狐艹你老母 2023-07-10 15:36 8阅读 0赞

<el-input id="insertInfoBcbd" v-model="insertInfoBcbd"></el-input>
    <el-table ref="table1" :data="tableData1" border highlight-current-row :row-class-name="table1RowClassName" @row-click="rowClick1" @current-change="currentChange1" style="width: 100%">
    </el-table>

data(){ 
     	return{ 
                    insertInfoBcbd:'0',
                    tableData1:[{ cbbh:10081,index:0},{ cbbh:10086,index:1},{ cbbh:10084,index:2},{ cbbh:10082,index:3},{ cbbh:10083,index:4},{ cbbh:10085,index:5},],
                    checkedRowNum1:0,
                    currentRow1:null,
        }
    },
    mounted(){ 
    	$('#insertInfoBcbd').keyup(()=>{ 
                    if(event.keyCode == 13){ 
                        this.bottomInputBlur();
                    }
    	});
    },
    methods:{ 
    	bottomInputBlur(){ //按下enter键，自动选中下一行
                    this.checkedRowNum1=this.checkedRowNum1+1
                    if (this.checkedRowNum1 >= this.tableData1.length) { 
                        this.checkedRowNum1=0
                    }
                    this.setCurrent1(this.tableData1[this.checkedRowNum1])
        },
        rowClick1(row, column, event){ //点击table某行的时候，已经触发了currentChange1函数
                    console.log(this.currentRow1)
                    this.checkedRowNum1=row.index
                    //记住用户点击的哪一行数据，为setCurrent1函数提供准确的row，才能实现按enter键后准确设置下一行为当前行，并高亮显示；row不自带index，需要在table1RowClassName函数里面自己添加（为了方便，我在table数据里面人为已经写上了）
       },
       currentChange1(val){ //把当前行存入变量，方便以后使用当前行的某些数据值
                    this.currentRow1=val
       },
       setCurrent1(row) { //设置哪一行为当前行
                    this.$refs.table1.setCurrentRow(row);
       }，
       table1RowClassName({ row, rowIndex}) { //为table数据添加index字段
                    row.index=rowIndex
       },
    }