vxe-table+vue2 键盘导航 快捷键实现编辑表格(复杂表格)
vxe-table官网地址
可实现功能
- 支持进入页面选中表格,进入页面即可操作上下键,选中行。
- 支持vxe-table通过上下键切换选中。
- 支持进入页面默认选中数据第一行,选中首个input框。
- 支持双回车(单回车)激活可编辑的单元格。
- 支持下拉容器表格使用页码/滚动条获取数据。
- 支持下拉容器输入框获取焦点查询数据。
- 支持回车键自动跳转到下一个单元格。
- 跳转到单元格时,若此单元格有下拉容器,默认展开。
![默认选中第一行第三列](https://i-blog.csdnimg.cn/blog_migrate/ad926f25ff7860b36bf08fb06f910713.png)
![回车默认展开下拉容器](https://i-blog.csdnimg.cn/blog_migrate/31c79fd66610d6009282a10b13b8e7fb.png)
表格vue源码
<vxe-table
ref="vxeTable"
align="center"
border
:data="data"
:row-config="{ isHover: true, isCurrent: true }"
:keyboard-config="{
isArrow: true,
isEnter: true,
enterToTab: true,
isEdit: true,
}"
:mouse-config="{ selected: true }"
:edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
@cell-selected="cellSelected"
>
vxe元素上主要参数
:row-config="{ isHover: true, isCurrent: true }"
:keyboard-config="{
isArrow: true,
isEnter: true,
enterToTab: true,
isEdit: true,
}"
:mouse-config="{ selected: true }"
:edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
vxe元素上主要方法
@cell-selected="cellSelected"
关键Api
foucs()
setCurrentRow(this.data[0])
getColumns()
setEditCell();
getCurrentRecord();
进入页面默认激活选中某行某列
mounted() {
this.$nextTick(() => {
this.$refs.vxeTable.focus();
this.$refs.vxeTable.setCurrentRow(this.data[0]);
const column = this.$refs.vxeTable.getColumns();
this.$refs.vxeTable.setEditCell(this.data[0], column[3]);
});
},
回车选中当前单元格 激活当前单元格
cellSelected({ $event, $table, rowIndex, columnIndex }) {
const {
editStore: { selected },
} = $table;
if (selected.row && selected.column && $event.keyCode == 25) {
$table.setEditCell(selected.row, selected.column);
}
if (rowIndex == this.tableData.length - 1 && columnIndex == 20) {
}
},
},
获取高亮行
getCurrentEvent() {
console.log(
"获取高亮行",
JSON.stringify(this.$refs.xTable.getCurrentRecord())
);
},