Vue Vben Admin项目中VxeGrid表格组件获取选中行数据的方法

概述

在Vue Vben Admin项目中，表格组件是基于VxeGrid实现的。开发者在使用过程中经常需要获取用户当前选中的行数据，这在业务开发中是一个常见需求。本文将详细介绍在V5版本中如何获取表格选中行的各种方法。

获取选中行数据的几种方式

VxeGrid提供了多种方法来获取用户选中的行数据，每种方法适用于不同的选择模式：

1. 获取单选行数据

当表格设置为单选模式时，可以使用以下方法：

// 获取当前单选选中的行数据
const selectedRow = this.$refs.xTable.getRadioRecord();

// 获取保留模式下的单选行数据（即使取消选中也能获取）
const reservedSelectedRow = this.$refs.xTable.getRadioReserveRecord();

2. 获取多选行数据

当表格设置为多选模式时，可以使用以下方法：

// 获取当前多选选中的行数据数组
const selectedRows = this.$refs.xTable.getCheckboxRecords();

// 获取保留模式下的多选行数据数组
const reservedSelectedRows = this.$refs.xTable.getCheckboxReserveRecords();

3. 获取当前聚焦行数据

无论单选还是多选模式，都可以获取当前聚焦的行数据：

// 获取当前聚焦的行数据
const focusedRow = this.$refs.xTable.getCurrentRecord();

实际应用示例

下面是一个完整的组件示例，展示了如何在Vue Vben Admin项目中使用这些方法：

<template>
  <vxe-grid
    ref="xTable"
    :data="tableData"
    :checkbox-config="{highlight: true}"
    @checkbox-change="handleCheckboxChange"
  >
    <!-- 列定义 -->
  </vxe-grid>
  
  <a-button @click="getSelected">获取选中行</a-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ]
    }
  },
  methods: {
    // 复选框变化事件
    handleCheckboxChange({ records }) {
      console.log('当前选中行:', records);
    },
    
    // 按钮点击获取选中行
    getSelected() {
      // 获取多选选中行
      const selected = this.$refs.xTable.getCheckboxRecords();
      console.log('选中行数据:', selected);
      
      // 获取当前聚焦行
      const current = this.$refs.xTable.getCurrentRecord();
      console.log('当前聚焦行:', current);
    }
  }
}
</script>

注意事项

1. 在使用这些方法前，请确保通过ref正确引用了表格组件
2. 单选和多选方法不能混用，要根据表格的实际配置选择对应的方法
3. 保留模式的方法可以在用户取消选中后仍然获取到之前选中的数据
4. 在组合式API中，需要通过getCurrentInstance()来获取表格实例

总结

Vue Vben Admin项目中的表格组件提供了丰富的API来获取用户选中的行数据。开发者可以根据实际业务需求选择合适的方法，无论是单选、多选还是获取当前聚焦行，都能轻松实现。理解这些方法的区别和使用场景，可以大大提高开发效率。