需求:弹出窗口表格需要通过键盘上下键选择数据,回车提交数据
html代码:
<el-table
border
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
size="mini"
:data="companyData"
@row-click="companyTableClick"
ref="list"
highlight-current-row
maxHeight="400px"
style="width: 100%;">
<el-table-column
prop="DWBM"
label="编号"
width="180"
align="center">
</el-table-column>
<el-table-column
prop="DWJC"
label="简称"
width="180"
align="center">
</el-table-column>
<el-table-column
prop="DWMC"
label="单位名称"
align="center">
</el-table-column>
<el-table-column
prop="is_usemainquote"
label="公司属性"
align="center">
</el-table-column>
</el-table>
js代码:
export default {
data() {
return {
loading: false,
companyData: [],
nowIndex:0
}
},
methods: {
keyUp(e) {
if (this.companyData.length == 0) {
return
}
if (e.keyCode == 40) { // 下键
if(this.companyData[this.nowIndex*1+1] != undefined){
this.$refs.list.setCurrentRow(this.companyData[this.nowIndex*1+1])
this.nowIndex = this.nowIndex*1+1
}else{
this.nowIndex = 0
this.$refs.list.setCurrentRow(this.companyData[0])
}
}else if (e.keyCode == 38) { // 上键
if(this.companyData[this.nowIndex*1-1] != undefined && this.nowIndex > 0){
this.$refs.list.setCurrentRow(this.companyData[this.nowIndex*1-1])
this.nowIndex = this.nowIndex*1-1
}else{
this.nowIndex = 0
this.$refs.list.setCurrentRow(this.companyData[0])
}
}else if(e.keyCode == 13){ //回车
this.$emit('selectedCompany', this.companyData[this.nowIndex])
}
},
companyTableClick(row, column, cell, event) {
this.$emit('selectedCompany', row)
},
},
created() {
this.$nextTick(()=>{
addEventListener('keyup', this.keyUp)//创建监听键盘事件
})
}
}