vue+element 实现表格，键盘上下键选择某一行，并选中 |
您所在的位置：网站首页 › 表格怎么用键盘换行上下换行 › vue+element 实现表格，键盘上下键选择某一行，并选中 |
|
1.直接上代码 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 // 上键 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) //打开键盘事件 }, } }总结 1.输入框绑定回车事件为 @keyup.native.enter=“getpurchaseevet(‘buyerref’)” 如果想移动光标到某个输入框，设置那个输入框的 ref 2.通过表格 :row-style 设置选中的颜色， 问题 1.表格某一行的高度固定死了，没有动态计算 2.mounted里监听键盘事件，会影响其他操作 （已优化） 等有时间再优化 代码里面都有注释，有什么不懂的欢迎留言呀~~~ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |