vxe-table+vue2 键盘导航 快捷键实现(复杂表格)_vue键盘操作el-table表格选择

vxe-table+vue2 键盘导航 快捷键实现编辑表格(复杂表格)

vxe-table官网地址

可实现功能

1. 支持进入页面选中表格，进入页面即可操作上下键，选中行。
2. 支持vxe-table通过上下键切换选中。
3. 支持进入页面默认选中数据第一行，选中首个input框。
4. 支持双回车(单回车)激活可编辑的单元格。
5. 支持下拉容器表格使用页码/滚动条获取数据。
6. 支持下拉容器输入框获取焦点查询数据。
7. 支持回车键自动跳转到下一个单元格。
8. 跳转到单元格时，若此单元格有下拉容器，默认展开。

表格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"
        >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

vxe元素上主要参数

//vxe元素上主要参数
	    :row-config="{ isHover: true, isCurrent: true }"// 行配置信息 
	    :keyboard-config="{
            isArrow: true,// 开启方向键功能
            isEnter: true,// 开启回车键功能
            enterToTab: true,// 是否将回车键行为改成 Tab 键行为
            isEdit: true,// 开启任意键进入编辑（功能键除外）
          }"
         :mouse-config="{ selected: true }"// 鼠标配置项  开启单元格选中功能
         // 可编辑配置项  触发方式   编辑模式 是否显示icon
         :edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
         
1
2
3
4
5
6
7
8
9
10
11
12

vxe元素上主要方法

//vxe元素上主要方法
	     @cell-selected="cellSelected"
1
2

关键Api

        foucs() //获取表格焦点
        setCurrentRow(this.data[0]) //进入页面默认选中列表第一行
        getColumns()//获取列表可视的列
        setEditCell();// 激活单元格
        getCurrentRecord();// 获取高亮行
1
2
3
4
5

进入页面默认激活选中某行某列

	mounted() {
    this.$nextTick(() => {
      // console.log("keyboard-navigate测试数据:", data);
      this.$refs.vxeTable.focus(); // 获取data表格焦点
      this.$refs.vxeTable.setCurrentRow(this.data[0]); // 默认选中第一行
      const column = this.$refs.vxeTable.getColumns(); // 获取表格的可视的列
      this.$refs.vxeTable.setEditCell(this.data[0], column[3]); // 激活第一行，第四列的输入框
    });
  },
1
2
3
4
5
6
7
8
9

回车选中当前单元格 激活当前单元格

    // 选中当前单元格  激活当前单元格
    cellSelected({ $event, $table, rowIndex, columnIndex }) {
    //rowIndex, columnIndex 当选选中行和列的index
      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) {
        //回车到表格最后一个单元格可做操作
      }
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

获取高亮行

  // 获取高亮行
    getCurrentEvent() {
      console.log(
        "获取高亮行",
        JSON.stringify(this.$refs.xTable.getCurrentRecord())
      );
    },
1
2
3
4
5
6
7