vue实现键盘上下选中数据，添加 修改数据到新列表中，回车 enter 进行确定 并跳转到下一个
<template>
<div>
<vxe-table
ref="vxeTable"
align="center"
border
resizable
show-overflow
size="mini"
:data="data"
:row-config="{ isHover: true, keyField: 'id' }"
highlight-current-row
:keyboard-config="{
isArrow: true,
isEnter: true,
isEdit: true,
}"
@keydown="handleKeydown"
:edit-config="{ trigger: 'click', mode: 'cell' }"
>
<vxe-column field="id" title="id" width="14%"></vxe-column>
<vxe-column field="product" title="product" width="14%"></vxe-column>
<vxe-column
field="short_code"
title="short_code"
width="14%"
></vxe-column>
<vxe-column
field="default_supplier"
title="default_supplier"
width="14%"
></vxe-column>
<vxe-column
field="description"
title="description"
width="14%"
></vxe-column>
<vxe-column
field="branch_effective_stock"
title="branch_effective_stock"
width="14%"
></vxe-column>
<vxe-column
field="quantity"
title="quantity"
width="14%"
:edit-render="{ autofocus: '.vxe-input--inner' }"
>
<template #edit="{ row }">
<vxe-input
v-model="row.quantity"
type="number"
min="0"
:controls="false"
@keydown.native="handleInputKeydown($event, row)"
></vxe-input>
</template>
</vxe-column>
<vxe-column
field="stock_level"
title="stock_level"
width="14%"
></vxe-column>
<vxe-column
field="available_boral"
title="available_boral"
width="14%"
></vxe-column>
</vxe-table>
<el-divider></el-divider>
<el-divider></el-divider>
<vxe-table
ref="newTable"
align="center"
border
resizable
show-overflow
size="mini"
:data="newTableData"
:row-config="{ isHover: true, isCurrent: true, keyField: 'id' }"
highlight-current-row
>
<vxe-column
v-for="item in newTableColumns"
:key="item.id"
:field="item.name"
:title="item.name"
></vxe-column>
</vxe-table>
</div>
</template>
<script>
export default {
name: "Keyup",
data() {
return {
data: [
{
id: 10001,
product: "Test122",
short_code: "T1",
default_supplier: "Develop",
description: "test-fdfdf-3111",
branch_effective_stock: 28,
quantity: 0,
stock_level: 0,
available_boral: 0,
},
{
id: 10002,
product: "fgtruee22",
short_code: "T11ff",
default_supplier: "De222velop",
description: "hfdfdsfdsfs",
branch_effective_stock: 0,
quantity: 0,
stock_level: 0,
available_boral: 0,
},
{
id: 10003,
product: "testre333",
short_code: "T221",
default_supplier: "De333velop",
description: "poggjfg",
branch_effective_stock: 0,
quantity: 0,
stock_level: 0,
available_boral: 0,
},
{
id: 104,
product: "ofdgfdggg",
short_code: "T221222",
default_supplier: "Ded333velop",
description: "11111poggjfg22",
branch_effective_stock: 0,
quantity: 0,
stock_level: 0,
available_boral: 0,
},
{
id: 105,
product: "ETRTRT",
short_code: "111T221222",
default_supplier: "Ded333velop",
description: "QWEFGG",
branch_effective_stock: 0,
quantity: 0,
stock_level: 0,
available_boral: 0,
},
{
id: 106,
product: "PP00ETRTRT",
short_code: "111T221222",
default_supplier: "222",
description: "FDVBN888",
branch_effective_stock: 0,
quantity: 0,
stock_level: 0,
available_boral: 0,
},
{
id: 107,
product: "FGHYE222",
short_code: "HYE22",
default_supplier: "11DSDS",
description: "34343FFFFF",
branch_effective_stock: 0,
quantity: 0,
stock_level: 0,
available_boral: 0,
},
],
currentRowIndex: 0,
newTableData: [],
newTableColumns: [
{ id: 1, name: "quantity" },
{ id: 2, name: "product" },
{ id: 3, name: "description" },
],
};
},
mounted() {
this.$nextTick(() => {
this.$refs.vxeTable.focus();
this.selectRow(0);
});
},
methods: {
selectRow(rowIndex) {
const column = this.$refs.vxeTable
.getColumns()
.find((col) => col.field === "quantity");
if (column) {
this.$refs.vxeTable.setEditCell(this.data[rowIndex], column);
this.currentRowIndex = rowIndex;
this.$refs.vxeTable.setCurrentRow(this.data[rowIndex]);
}
},
handleKeydown(e) {
if (e.$event.key === "ArrowUp") {
if (this.currentRowIndex > 0) {
this.selectRow(this.currentRowIndex - 1);
}
} else if (e.$event.key === "ArrowDown") {
if (this.currentRowIndex < this.data.length - 1) {
this.selectRow(this.currentRowIndex + 1);
}
}
},
handleInputKeydown(event, row) {
if (event.key === "Enter") {
if (row.quantity === 0 || row.quantity == "") {
row.quantity = 0;
this.$message.warning("Quantity cannot be zero");
}
if (row.quantity > 0) {
const rowIndex = this.data.indexOf(row);
const exists = this.newTableData.some((item) => item.id === row.id);
if (!exists) {
const newRow = {
id: row.id,
quantity: row.quantity,
product: row.product,
description: row.description,
};
this.newTableData.push(newRow);
} else {
const index = this.newTableData.findIndex(
(item) => item.id === row.id
);
this.newTableData.splice(index, 1, {
id: row.id,
quantity: row.quantity,
product: row.product,
description: row.description,
});
}
if (rowIndex < this.data.length - 1) {
this.selectRow(rowIndex + 1);
} else {
this.$refs.vxeTable.clearActived();
}
}
}
},
},
};
</script>
