ag-grid-vue如何获取展开行选中的数据

在ag-Grid Vue中，获取展开行选中的数据需要通过`gridApi`提供的事件处理机制来完成。首先，你需要在组件中设置`gridReady`事件处理器，以便在表格初始化完成后访问API。

以下是一个简单的步骤示例：

1. 安装并导入依赖库：

<script src="https://unpkg.com/ag-grid-community@latest/dist/ag-grid-community.min.js"></script>
<script src="https://unpkg.com/ag-grid-community-vue@latest/dist/ag-grid-community-vue.min.js"></script>

2. 创建一个Vue组件并监听`gridReady`事件：

<template>
  <div ref="myGrid" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script>
import { AgGridVue } from "ag-grid-community-vue";

export default {
  components: {
    AgGridVue,
  },
  data() {
    return {
      gridApi: null,
      rowData: [], // 假设这是你的数据源
    };
  },
  mounted() {
    this.gridApi = this.$refs.myGrid.api;
    this.gridApi.on("cellClicked", this.handleCellClick);
  },
  methods: {
    handleCellClick(params) {
      if (params.rowNode.expanded) {
        const selectedData = params.data; // 这里就是展开行的数据
        console.log("Selected Data:", selectedData);
      }
    },
  },
};
</script>

在这个例子中，当用户点击展开行时，`handleCellClick`方法会被触发，它会检查当前点击的是否是展开的行，并从中获取选中的数据。