antdesignvue1.7 table 上下键切换选中行

在 Ant Design Vue 1.7 中，可以通过监听键盘事件来实现在 Table 中使用上下键切换选中行的功能。具体实现步骤如下：

1. 在 Table 组件上添加 ref 属性，方便在代码中引用该组件。

<template>
  <a-table ref="myTable" :columns="columns" :data-source="data"></a-table>
</template>

2. 在组件的 mounted 钩子函数中，给表格绑定键盘事件。

mounted() {
  this.$refs.myTable.$el.addEventListener('keydown', this.handleKeyDown);
},

3. 在组件中定义键盘事件的回调函数 handleKeyDown，当按下上下键时，根据当前选中行的 index 值，计算出下一个需要选中的行的 index 值，并使用 Table 组件提供的 setSelectedRowKeys 方法来更新选中行。

methods: {
  handleKeyDown(event) {
    const { keyCode } = event;
    const { selectedRowKeys } = this.$refs.myTable;

    if (keyCode === 38 || keyCode === 40) { // 上下键
      event.preventDefault(); // 阻止默认事件，避免滚动条跟随键盘滚动
      let nextIndex = -1;

      if (selectedRowKeys.length === 0) { // 如果没有选中行，则选中第一行
        nextIndex = 0;
      } else { // 否则根据当前选中行的 index 计算出下一个需要选中的行的 index
        const currentIndex = this.data.findIndex(item => item.key === selectedRowKeys[0]);
        if (keyCode === 38) { // 上键
          nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
        } else if (keyCode === 40) { // 下键
          nextIndex = currentIndex < this.data.length - 1 ? currentIndex + 1 : this.data.length - 1;
        }
      }

      // 更新选中行
      const nextRow = this.data[nextIndex];
      this.$refs.myTable.setSelectedRowKeys([nextRow.key]);
    }
  },
},

完整代码如下：

<template>
  <a-table ref="myTable" :columns="columns" :data-source="data"></a-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
        { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
        { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
        { key: '4', name: 'Disabled User', age: 99, address: 'Sidney No. 1 Lake Park' },
      ],
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
      ],
    };
  },
  mounted() {
    this.$refs.myTable.$el.addEventListener('keydown', this.handleKeyDown);
  },
  beforeDestroy() {
    this.$refs.myTable.$el.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(event) {
      const { keyCode } = event;
      const { selectedRowKeys } = this.$refs.myTable;

      if (keyCode === 38 || keyCode === 40) { // 上下键
        event.preventDefault(); // 阻止默认事件，避免滚动条跟随键盘滚动
        let nextIndex = -1;

        if (selectedRowKeys.length === 0) { // 如果没有选中行，则选中第一行
          nextIndex = 0;
        } else { // 否则根据当前选中行的 index 计算出下一个需要选中的行的 index
          const currentIndex = this.data.findIndex(item => item.key === selectedRowKeys[0]);
          if (keyCode === 38) { // 上键
            nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
          } else if (keyCode === 40) { // 下键
            nextIndex = currentIndex < this.data.length - 1 ? currentIndex + 1 : this.data.length - 1;
          }
        }

        // 更新选中行
        const nextRow = this.data[nextIndex];
        this.$refs.myTable.setSelectedRowKeys([nextRow.key]);
      }
    },
  },
};
</script>