<JVxeTable
keep-source
resizable
ref="billProduct"
:loading="billProductTable.loading"
:columns="billProductTable.columns"
:dataSource="billProductTable.dataSource"
:height="340"
:rowNumber="true"
:rowSelection="true"
:disabled="formDisabled"
:toolbar="true"
:keyboardEdit = "true"
authPre="transportBill"
/>
在JVxeTable组件标签中,添加一个:keyboardEdit = "true"属性即可,在网上查了很久都没有查到,对于前端一窍不通的我,只知道JVxeTable是封装了VxeTable,在VxeTable看到该组件是支持键盘事件的,所以我认为就算Jeecg没有实现,通过该源码也是可以实现这个效果的,于是开始看JVxeTable代码。
最后在JVxeTable中发现了useKeyboardEdit.ts文件,这个文件正是涉及键盘操作的文件,在这个文件中,Jeecg重写了VxeTable原本覆盖式的键盘操作,改成了追加式的操作。
/*
* JVxeTable 键盘操作
*/
import type { VxeTablePropTypes } from 'vxe-table';
import type { JVxeTableProps } from '../types';
import { computed } from 'vue';
/**
* JVxeTable 键盘操作
*
* @param props
*/
export function useKeyboardEdit(props: JVxeTableProps) {
// 是否开启了键盘操作
const enabledKeyboard = computed(() => props.keyboardEdit ?? false);
// 重写 keyboardConfig
const keyboardConfig: VxeTablePropTypes.KeyboardConfig = {
editMethod({ row, column, $table }) {
// 重写默认的覆盖式,改为追加式
$table.setActiveCell(row, column);
return true;
},
};
// 键盘操作配置
const keyboardEditConfig = computed(() => {
return {
mouseConfig: {
selected: enabledKeyboard.value,
},
keyboardConfig,
};
});
return {
keyboardEditConfig,
};
}
实现效果: