vue+element 实现表格，键盘上下键选择某一行，并选中

1.直接上代码

<template>
	<div>
		<el-form label-width='0.5rem' style='display:flex' class='fromclass aline'>
			<el-form-item label="公司" required>
				<el-input style='width:1.6rem' v-model="purchase" autocomplete="off" @keyup.native.enter="getpurchaseevet('buyerref')" ref='purchaserel' clearable>el-input>
			el-form-item>
			<el-form-item label="人员">
				<el-input style='width:1rem' v-model="buyer" autocomplete="off" ref='buyerref' clearable>el-input>
			el-form-item>
		el-form>
		<el-dialog title="公司信息" :visible.sync="popupsupplier" width="90%" :close-on-click-modal="false">
			<el-table ref="multipleTabless" :data="datalist" border height='2.3rem' v-loading="loadings" element-loading-text="拼命加载中" style='margin-top: 0.1rem;' :row-style="rowStyle" @row-dblclick="handledbsupplier">
				<el-table-column type="index" label="序号" width="70" align="center">el-table-column>
				<el-table-column label="名称" property="company">el-table-column>
				<el-table-column label="联系人" property="username" align="center">el-table-column>
				<el-table-column label="联系人电话" property="userphone" align="center">el-table-column>
			el-table>
		el-dialog>
	div>
template>

<script>
	export default {
			data() {
				return {
					purchase:'',//公司名称
					purchasecode:'',//公司code
					buyer:'',//人员
					loadings:false,
					popupsupplier:false,
					datalist:[
						{code:'ad00001',company:'xxxx公司',username:'张三',userphone:'156********'},
						{code:'ad00002',company:'xxxx公司',username:'李四',userphone:'156********'},
						{code:'ad00003',company:'xxxx公司',username:'王二',userphone:'156********'},
						{code:'ad00004',company:'xxxx公司',username:'麻子',userphone:'156********'},
						{code:'ad00005',company:'xxxx公司',username:'张三1',userphone:'156********'},
						{code:'ad00006',company:'xxxx公司',username:'李四1',userphone:'156********'},
						{code:'ad00007',company:'xxxx公司',username:'王二1',userphone:'156********'},
						{code:'ad00008',company:'xxxx公司',username:'麻子1',userphone:'156********'},
						{code:'ad00009',company:'xxxx公司',username:'张三2',userphone:'156********'},
						{code:'ad000010',company:'xxxx公司',username:'李四2',userphone:'156********'},],//这个数据是请求过来的数据，我写死了
						datarow:'', // 当前已选择行
						dataindex: 0, // 当前选择行的index
						refenter:'',//光标移动
				}
			},
			mounted() {
				// setTimeout(() => {
				// 	addEventListener('keyup', this.keyUp)//创建监听键盘事件
				// }, 100)
					this.$nextTick(() => {
						addEventListener('keyup', this.keyUp)//创建监听键盘事件
					})
				
			},
			methods: {
				keyUp(e) {
					        // 表格为空，不执行下方 
					      if (this.datalist.length == 0) {
							  return
						  }
					      if (e.keyCode == 40) { // 下键
							if(this.dataindex==this.datalist.length-1){
								this.dataindex=0  //当选中的index与数据的天数相等时，在按下键就要返回第一个
								this.datarow=this.datalist[0]
								let height =47  //计算表格一行的高度，用于出现滚动条的时候，页面展示选中的某一行
								this.$refs.multipleTabless.bodyWrapper.scrollTop = -(height * (this.datalist.length-6));
							}else{
								if(this.dataindex>6&&this.dataindex<14){
									let height =47  //计算选中行离表格顶部的距离
									this.$refs.multipleTabless.bodyWrapper.scrollTop = (height * (this.dataindex- 6));
								}
								this.dataindex=this.dataindex+1
								this.datarow=this.datalist[this.dataindex]// 当前已选择行
							}
					      } 
						  else if (e.keyCode == 38) { // 上键
					        if(this.dataindex==0){  //当选中的index等于0时，说明到顶了，再按上键就要返回到表格的底部，并计算距离表格顶部的距离
					        	this.dataindex=this.datalist.length-1
					        	this.datarow=this.datalist[this.dataindex]// 当前已选择行
								let height =47
								
								this.$refs.multipleTabless.bodyWrapper.scrollTop = (height * (this.datalist.length-6));
					        }else{
					        	this.dataindex=this.dataindex-1
					        	this.datarow=this.datalist[this.dataindex]
								let height =47
								this.$refs.multipleTabless.bodyWrapper.scrollTop += -(height * (1));
					        }
					    }else if (e.keyCode == 37){  //左键赋值给输入框
							this.$refs[this.refenter].focus()//光标移动到那个输入框
							this.popupsupplier=false//关闭弹窗
							removeEventListener('keyup', this.keyUp)//关闭键盘事件
						}
					},
					//改变表格选中某一行    的颜色
					rowStyle(row) {
							if(row.rowIndex==this.dataindex){
								return {
								  color: '#F56C6C'
								}
							}
					      
					    },
					    //双击选择某一行
					handledbsupplier(row) {
						this.purchase=row.company
						this.purchasecode=row.code
					},
					//公司回车事件
					getpurchaseevet(nextRef) {
						this.refenter=nextRef  //下个光标移动到那个输入框
						this.popupsupplier=true//弹窗
						this.datalist=this.datalist
						addEventListener('keyup', this.keyUp)  //打开键盘事件
					},
					
					
			}
		}

script>

<style>
style>

总结
1.输入框绑定回车事件为 @keyup.native.enter=“getpurchaseevet(‘buyerref’)”
如果想移动光标到某个输入框，设置那个输入框的 ref
2.通过表格 :row-style 设置选中的颜色，

问题
1.表格某一行的高度固定死了，没有动态计算
2.mounted里监听键盘事件，会影响其他操作 （已优化）
等有时间再优化

代码里面都有注释，有什么不懂的欢迎留言呀~~~