要检测行点击事件,您可以使用ag-grid-vue
提供的onRowClicked
事件监听器。以下是一个代码示例:
首先,确保您已经安装了ag-grid-vue
库。
在您的Vue组件中,导入ag-grid-vue
和所需的样式。
import { AgGridVue } from 'ag-grid-vue';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
template
中,使用ag-grid-vue
组件包装您的表格。
data
中,定义表格的列定义和行数据。data() {
return {
columnDefs: [
{ headerName: 'ID', field: 'id' },
{ headerName: 'Name', field: 'name' },
{ headerName: 'Age', field: 'age' }
],
rowData: [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Bob', age: 35 }
]
};
},
methods
中,定义onGridReady
和onRowClicked
方法。methods: {
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
},
onRowClicked(event) {
console.log('Row clicked:', event.data);
}
}
现在,当用户点击表格的行时,onRowClicked
方法将被调用,并将行数据作为参数传递。您可以根据需要在该方法中执行任何操作。
希望这可以帮助到您!