如果表格中的输入框和下拉框需要实现方向键切换选择,效果如图:
使用的是IView
的UI框架和Vue2
,核心是在输入框和下拉框上添加按键监听事件,监听按键对应方向应该要完成的操作,比如当前在Name
列的第一行,按【向左键】的话,需要鼠标光标在第一行的Address
列focus()
。
keyup按下键盘执行的方法
handleKeyDown(event, row, key, name) {
// ↑
if (event.keyCode === 38) {
// 按向上键需要执行的操作
}
// ↓
if (event.keyCode === 40) {
// 按向下键需要执行的操作
}
// ->
if (event.keyCode === 39) {
// 按向右键需要执行的操作
}
// <-
if (event.keyCode === 37) {
// 按向左键需要执行的操作
}
},
针对上下方向键,其实就是更改数组的索引值
changeCurrentRow(row, key, type, name) {
let curIndex = row._index;
if (type === "+") {
curIndex = row._index + 1;
} else {
curIndex = row._index - 1;
}
let changeRow = this.data[curIndex];
this.$nextTick(() => {
let e = document.querySelectorAll(`.${key}`)[curIndex];
e.querySelector(name).focus();
});
},
template
模板部分
<template>
<Table :columns="columns" :data="data">
<template #input="{ row, column }">
<div
:class="column.key"
>
<Input
v-model="row[column.key]"
@on-keyup="handleKeyDown($event, row, column.key, 'input')"
@on-blur="changeValue(column, row[column.key], row._index)"
/>
div>
template>
<template #select="{ row, column }">
<Select
:class="column.key"
filterable
@keyup="handleKeyDown($event, row, column.key, '.ivu-select-input')"
@on-change="changeSelect(column, row[column.key], row._index, row)"
clearable
v-model="row[column.key]"
:placeholder="`请选择${column.title}`"
>
<Option
v-for="item in selectOption"
:key="item.value"
:value="item.value"
:label="item.label"
/>
Select>
template>
Table>
template>
javascript
部分
<script>
export default {
data() {
return {
selectOption: [
{
value: "1",
label: "四川省",
},
{
value: "2",
label: "广东省",
},
],
columns: [
{
title: "Name",
key: "name",
slot: "input",
},
{
title: "Age",
key: "age",
},
{
title: "Address",
key: "address",
slot: "select",
},
{
title: "Remark",
key: "remark",
slot: "input",
},
],
data: [
{
name: "John Brown",
age: 18,
address: "1",
remark: "",
},
{
name: "Jim Green",
age: 24,
address: "2",
remark: "",
},
{
name: "Joe Black",
age: 30,
address: "1",
remark: "",
},
{
name: "Jon Snow",
age: 26,
address: "1",
remark: "1",
},
],
};
},
methods: {
changeValue(column, val, index) {
this.data[index][column.key] = val;
},
changeSelect(column, val, index) {
this.data[index][column.key] = val;
},
handleKeyDown(event, row, key, name) {
// ↑
if (event.keyCode === 38) {
if (row._index > 0) {
this.changeCurrentRow(row, key, "-", name);
}
}
// ↓
if (event.keyCode === 40) {
if (row._index + 2 <= this.data?.length) {
this.changeCurrentRow(row, key, "+", name);
}
}
// ->
if (event.keyCode === 39) {
if (key === "name") {
this.$nextTick(() => {
let e = document.querySelectorAll(".address")[row._index];
e.querySelector(".ivu-select-input").focus();
});
} else if (key === "address") {
this.$nextTick(() => {
let e = document.querySelectorAll(".remark")[row._index];
e.querySelector("input").focus();
});
}
}
// <-
if (event.keyCode === 37) {
if (key === "remark") {
this.$nextTick(() => {
let e = document.querySelectorAll(".address")[row._index];
e.querySelector(".ivu-select-input").focus();
});
} else if (key === "address") {
this.$nextTick(() => {
let e = document.querySelectorAll(".name")[row._index];
e.querySelector("input").focus();
});
}
}
},
changeCurrentRow(row, key, type, name) {
let curIndex = row._index;
if (type === "+") {
curIndex = row._index + 1;
} else {
curIndex = row._index - 1;
}
let changeRow = this.data[curIndex];
this.$nextTick(() => {
let e = document.querySelectorAll(`.${key}`)[curIndex];
e.querySelector(name).focus();
});
},
},
};
</script>