ag-grid-vue添加单选框并捕捉单选框点击事件

要在 ag-grid-vue 中添加单选框并捕获单选框点击事件，可以按照以下步骤进行操作：

1. 在列定义中添加一个名为`checkboxSelection`的列，以显示单选框。例如：

{
  headerName: "Select",
  checkboxSelection: true,
  width: 80,
  suppressMenu: true
}

2. 在`gridOptions`中设置`rowSelection`属性为`single`，以确保只能选择一个行。例如：

gridOptions: {
  rowSelection: 'single'
}

3. 在`gridReady`事件处理程序中，将选中行更改事件添加到`gridApi`对象中。例如：

onGridReady(params) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;

  this.gridApi.addEventListener('rowSelected', this.onRowSelected.bind(this));
},

onRowSelected(event) {
  // 处理选中行更改事件
}

4. 在`onRowSelected`事件处理程序中，可以通过`event.data`属性访问选中的行数据。例如：

onRowSelected(event) {
  const selectedRowData = event.data;
  // 处理选中行数据
}

5. 如果要在单击单选框时触发事件，可以使用`cellClicked`事件处理程序。例如：

onCellClicked(event) {
  if (event.colDef.checkboxSelection) {
    // 处理单选框点击事件
  }
}

完整示例代码如下：

<template>
  <div style="height: 500px" class="ag-theme-alpine">
    <ag-grid-vue
      :columnDefs="columnDefs"
      :rowData="rowData"
      :gridOptions="gridOptions"
      @gridReady="onGridReady"
      @cellClicked="onCellClicked"
    ></ag-grid-vue>
  </div>
</template>

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

export default {
  components: {
    AgGridVue,
  },
  data() {
    return {
      gridApi: null,
      gridColumnApi: null,
      columnDefs: [
        {
          headerName: 'Select',
          checkboxSelection: true,
          width: 80,
          suppressMenu: true,
        },
        { field: 'make' },
        { field: 'model' },
        { field: 'price' },
      ],
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 },
      ],
      gridOptions: {
        rowSelection: 'single',
      },
    };
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;

      this.gridApi.addEventListener('rowSelected', this.onRowSelected.bind(this));
    },
    onRowSelected(event) {
      const selectedRowData = event.data;
      console.log(selectedRowData);
    },
    onCellClicked(event) {
      if (event.colDef.checkboxSelection) {
        console.log('Checkbox clicked');
      }
    },
  },
};
</script>