其中:edit-render="{autofocus: '.vxe-input--inner',placeholder: '请输入'}"和方法中选中的类要保持一致。
<vxe-column v-if="col.edit" :key="col.field" :field="col.field" :title="col.title" :width="col.width" :edit-render="{autofocus: '.vxe-input--inner',placeholder: '请输入'}">
<template #edit="{ row }">
<vxe-input v-model="row[col.field]" type="text"></vxe-input>
</template>
</vxe-column>
keyBoardChange() {
let inputStr = ".vxe-cell .vxe-input--inner";
//使用VXEtable 上下左右操作表格 ,将 edit-config的trigger改为 'click'
$(document).keydown(function (e) {
console.log(e.keyCode);
let current = $(inputStr);
if (current.length > 0) {
if ((!e.shiftKey && e.keyCode === 9) || e.keyCode === 39) {
//tab键 或者 向右
let nextCell = current.parents("td[colid]").next();
if (nextCell.length > 0) {
nextCell.click();
setTimeout(() => {
$(inputStr).select();
}, 10);
}
return false;
}
if (e.keyCode === 37 || (e.shiftKey && e.keyCode === 9)) {
//向左 或者 shift+tab
let prevCell = current.parents("td[colid]").prev();
if (prevCell.length > 0) {
prevCell.click();
setTimeout(() => {
$(inputStr).select();
}, 10);
}
return false;
}
if (e.keyCode == 38) {
//向上
let colid = current.parents("td[colid]").attr("colid");
let nextRow = current.parents("tr[rowid]").prev();
if (nextRow.length > 0) {
nextRow.find("td[colid=" + colid + "]").click();
setTimeout(() => {
$(inputStr).select();
}, 10);
}
return false;
}
if (e.keyCode == 40 || e.keyCode === 13) {
//向下或者回车
let colid = current.parents("td[colid]").attr("colid");
let nextRow = current.parents("tr[rowid]").next();
if (nextRow.length > 0) {
nextRow.find("td[colid=" + colid + "]").click();
setTimeout(() => {
$(inputStr).select();
}, 10);
}
return false;
}
}
});
},
