antdesignvue 1.7 table 键盘事件

Ant Design Vue 1.7 的表格组件 `a-table` 支持键盘事件。具体可以监听以下事件：

- `@keydown`：当用户按下键盘上的任意键时触发，可以使用 `event.keyCode` 获取按下的键的编码。
- `@keyup`：当用户释放键盘上的任意键时触发，可以使用 `event.keyCode` 获取释放的键的编码。
- `@keypress`：当用户按下并释放键盘上的任意键时触发，可以使用 `event.keyCode` 获取按下的键的编码。

在表格中，可以使用 `rowKey` 属性来指定每一行的唯一键值，也可以使用 `selection` 属性来开启行选择功能。当选中行后，可以使用 `@keydown.enter` 事件监听回车键，进一步处理选中行的数据。

以下是一个示例代码：

<template>
  <a-table :columns="columns" :data-source="dataSource" row-key="id" selection v-model="selectedRowKeys" @keydown.enter="handleEnter"></a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
        },
      ],
      dataSource: [
        {
          id: 1,
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          id: 2,
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          id: 3,
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
      ],
      selectedRowKeys: [],
    };
  },
  methods: {
    handleEnter() {
      const selectedRow = this.dataSource.find(item => item.id === this.selectedRowKeys[0]);
      console.log(selectedRow);
    },
  },
};
</script>

在上述示例中，我们监听了 `@keydown.enter` 事件，当用户按下回车键时，会触发 `handleEnter` 方法，该方法会根据选中行的唯一键值 `id` 查找到该行数据，并打印到控制台上。