ag-grid-vue：如何检测行点击？

Posted 2023-03-28

技术标签:

【中文标题】ag-grid-vue：如何检测行点击？【英文标题】：ag-grid-vue: how to detect row click? 【发布时间】：2021-01-30 20:39:03 【问题描述】：

我正在关注here的例子。

一切正常，现在我想检测行点击并获取事件数据。

这是我的App.vue：

<template>
  <ag-grid-vue style="width: 500px; height: 500px;"
           class="ag-theme-alpine"
           :columnDefs="columnDefs"
           :rowData="rowData"
           :rowClicked="onRowClicked"
  >
  </ag-grid-vue>
</template>

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

export default 
  name: 'App',
  data() 
    return 
      columnDefs: null,
      rowData: null
    
  ,
  components: 
    AgGridVue
  ,
  methods:
    onRowClicked(params) 
      console.log(params);
      console.log(params.node.data);
    
  ,
  beforeMount() 
    this.columnDefs = [
      headerName: 'Make', field: 'make', sortable: true, filter: true ,
      headerName: 'Model', field: 'model', sortable: true, filter: true ,
      headerName: 'Price', field: 'price', sortable: true, filter: true 
    ];

    fetch('https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/sample-data/smallRowData.json')
        .then(result => result.json())
        .then(rowData => this.rowData = rowData);
  

</script>

<style>
@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css";
</style>

但是，当我单击一行时，不会调用方法onRowClicked。

我在这里缺少什么？

【问题讨论】：

【参考方案1】：

替换此行