AgGridSelection.vue

<!--
 * AG-grid 选择
 * https://www.ag-grid.com/vue-data-grid/selection-overview/
 -->
<script setup lang="ts">
import { ref, reactive, onMounted, computed } 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 columnDefs = reactive([
  { field: 'athlete', minWidth: 150, headerName: '运动员' },
  { field: 'age', maxWidth: 90, headerName: '年龄' },
  { field: 'country', minWidth: 150, headerName: '国家' },
  { field: 'year', maxWidth: 90, headerName: '年份' },
  { field: 'date', minWidth: 150, headerName: '日期' },
  { field: 'sport', minWidth: 150, headerName: '运动' },
  { field: 'gold', headerName: '金牌' },
  { field: 'silver', headerName: '银牌' },
  { field: 'bronze', headerName: '铜牌' },
  { field: 'total', headerName: '共计' },
]);

const selectionGroup = ref('single');
const rowSelectionOpt = reactive([
  {
    label: '单选',
    value: 'single',
  },
  {
    label: '多选',
    value: 'multiple',
  },
  {
    label: '单击多选',
    value: 'both',
  },
]);

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

const rowSelection = computed(() => {
  let val = '';
  switch (selectionGroup.value) {
    case 'single':
      val = 'single';
      break;

    case 'multiple':
      val = 'multiple';
      break;

    default:
      val = 'multiple';
      break;
  }
  return val;
});

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 onSelectionChanged() {
  const selectedRows = gridApi.value.getSelectedRows();
  state.selected = selectedRows.map((item: any) => item.athlete);
}

function deselectRows() {
  gridApi.value.deselectAll();
}
</script>
<template>
  <div class="box">
    <div class="text">
      <span>已选择：{{ state.selected.join('，') }}</span>
      <q-option-group
        dense
        v-model="selectionGroup"
        :options="rowSelectionOpt"
        color="primary"
        inline
      />
      <q-btn
        color="primary"
        label="取消所有选择"
        no-caps
        @click="deselectRows"
      />
    </div>
    <!-- 
        rowSelection="multiple"：多选，按住control键多选；【control+shift+鼠标点击】可选中多行
        animateRows=true：启用行动画
        :masterDetail="true" 启用展开的细节网格行
        :isRowMaster="isRowMaster" 确定哪一个行该展开
        rowSelection="single" single单选 multiple多选
     -->
    <div class="ag-table">
      <ag-grid-vue
        style="height: 550px"
        class="ag-theme-alpine"
        :animateRows="true"
        :pagination="true"
        :paginationPageSize="10"
        :localeText="AG_GRID_LOCALE"
        :defaultColDef="defaultColDef"
        :columnDefs="columnDefs"
        :rowData="state.rowData"
        :rowSelection="rowSelection"
        :rowMultiSelectWithClick="selectionGroup === 'both'"
        @grid-ready="onGridReady"
        @selection-changed="onSelectionChanged"
      >
      </ag-grid-vue>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.text {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: 10px;
}
.ag-table {
  padding: 0 10px 10px 10px;
}
</style>