ag-grid-vue 添加单选框并获取事件
时间: 2023-01-11 09:55:36 浏览: 137
在 ag-grid-vue 中添加单选框,可以使用以下方法:
1. 在 columnDefs 中添加一个带有单选框的列,示例代码如下:
```
columnDefs: [
{
headerName: '选择',
field: 'selected',
checkboxSelection: true,
},
// 其他列
]
```
2. 在 template 中使用 ag-grid 的组件,示例代码如下:
```
<template>
<ag-grid-vue
ref="agGrid"
:columnDefs="columnDefs"
:rowData="rowData"
:rowSelection="rowSelection"
>
</ag-grid-vue>
</template>
<script>
export default {
data() {
return {
columnDefs: [
{
headerName: '选择',
field: 'selected',
checkboxSelection: true,
},
// 其他列
],
rowSelection: 'multiple',
rowData: [
// 数据
],
}
},
}
</script>
```
获取事件,可以使用 ag-grid 的 API。例如,可以使用 getSelectedRows() 方法获取当前选中的行:
```
let selectedRows = this.$refs.agGrid.api.getSelectedRows()
```
您还可以使用 ag-grid 的事件,例如 rowSelected 事件,在选中行时触发:
```
<template>
<ag-grid-vue
ref="agGrid"
:columnDefs="columnDefs"
:rowData="rowData"
:rowSelection="rowSelection"
@rowSelected="onRowSelected"
>
</ag-grid-vue>
</template>
<script>
export default {
methods: {
onRowSelected(event) {
console.log(event)
},
},
}
</script>
```