AgGridGroupSelection.vue

<!--
 * Ag Grid 组选择
 * https://www.ag-grid.com/vue-data-grid/row-selection/#group-selection
 -->
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';
import AG_GRID_LOCALE from 'src/config/ag-grid-locale';

const defaultColDef = {
  flex: 1,
  minWidth: 100,
  suppressMenu: true, // 是否禁用标题行菜单
};

const gridApi = ref<any>(null);
const gridColumnApi = ref<any>(null);

const autoGroupColumnDef = reactive({
  headerName: '运动员',
  field: 'athlete',
  minWidth: 250,
  sortable: true,
  cellRenderer: 'agGroupCellRenderer',
  cellRendererParams: {
    checkbox: true,
  },
});

const columnDefs = reactive([
  {
    field: 'year',
    minWidth: 150,
    rowGroup: true,
    hide: true,
    sortable: true,
    headerName: '年份',
  },

  {
    field: 'country',
    rowGroup: true,
    hide: true,
    sortable: true,
    headerName: '国家',
  },
  { field: 'sport', headerName: '运动' },
  { field: 'gold', aggFunc: 'sum', headerName: '金牌' },
  { field: 'silver', aggFunc: 'sum', headerName: '银牌' },
  { field: 'bronze', aggFunc: 'sum', headerName: '铜牌' },
  {
    field: 'age',
    minWidth: 120,
    aggFunc: 'sum',
    headerName: '年龄',
  },
  { field: 'date', minWidth: 150, headerName: '日期' },
]);

const state = reactive({
  rowData: [] as any,
});

onMounted(() => {
  //
});

function getData() {
  fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
    .then((resp) => resp.json())
    .then((data) => {
      state.rowData = data;
      console.log('state.rowData[0]', state.rowData[0]);
    });
}

function onGridReady(params: any) {
  gridApi.value = params.api;
  gridColumnApi.value = params.columnApi;
  getData();
}

function onFirstDataRendered() {
  //
}

function onSelectionChanged() {
  // const selectedNodes = gridApi.value.getSelectedNodes();
  // console.log('selectedNodes', selectedNodes);
}
</script>
<template>
  <div class="box">
    <!-- 
        rowSelection="multiple"：多选，按住control键多选；【control+shift+鼠标点击】可选中多行
        animateRows=true：启用行动画
        :masterDetail="true" 启用展开的细节网格行
        :isRowMaster="isRowMaster" 确定哪一个行该展开
        rowSelection="single" single单选 multiple多选
        :suppressContextMenu="true" 阻止显示右键单击时的上下文菜单
        :suppressCellFocus="true" 阻止单元格聚焦
     -->
    <div class="ag-table">
      <ag-grid-vue
        style="height: 550px"
        class="ag-theme-alpine"
        :animateRows="true"
        :localeText="AG_GRID_LOCALE"
        :suppressContextMenu="true"
        :suppressCellFocus="true"
        :defaultColDef="defaultColDef"
        :columnDefs="columnDefs"
        :rowData="state.rowData"
        :autoGroupColumnDef="autoGroupColumnDef"
        :groupSelectsChildren="true"
        rowSelection="multiple"
        :suppressAggFuncInHeader="true"
        :suppressRowClickSelection="true"
        @grid-ready="onGridReady"
        @first-data-rendered="onFirstDataRendered"
        @selection-changed="onSelectionChanged"
      >
      </ag-grid-vue>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ag-table {
  padding: 0 10px 10px 10px;
}
</style>