AgGridCheckboxSelection.vue

<!--
 * Ag Grid 复选框选择
 * https://www.ag-grid.com/vue-data-grid/row-selection/#checkbox-selection
 -->
<script setup lang="ts">
import { ref, reactive, onMounted, watch } 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 checkAllUsable = ref<any>(null);

const columnDefs = reactive([
  {
    field: 'athlete',
    headerName: '运动员',
    checkboxSelection: (params: any) => {
      return params.data && params.data.year !== 2012;
    },
    showDisabledCheckboxes: true,
  },
  { field: 'sport', headerName: '运动' },
  { field: 'year', maxWidth: 120, headerName: '年份' },
]);

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

watch(checkAllUsable, (val: any) => {
  if (val === true) {
    gridApi.value.forEachNode((node: any) => {
      node.setSelected(true);
    });
  } else if (val === false) {
    deselectRows();
  }
});

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

function getData() {
  fetch('https://www.ag-grid.com/example-assets/small-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(params: any) {
  params.api.forEachNode((node: any) =>
    node.setSelected(node.data && node.data.year == 2012)
  );
}

function onSelectionChanged() {
  const length1 = state.rowData.length;
  const selectedRows = gridApi.value.getSelectedRows();
  const length2 = selectedRows.length;
  state.selected = selectedRows.map((item: any) => item.athlete);
  if (length1 && length1 === length2) {
    checkAllUsable.value = true;
  } else if (length1 !== length2) {
    checkAllUsable.value = null;
  } else {
    checkAllUsable.value = false;
  }
}

// function isRowSelectable(params: any) {
//   return !!params.data && params.data.year === 2012;
// }

function deselectRows() {
  //   gridApi.value.deselectAll();
  gridApi.value.forEachNode((node: any) => {
    let falg = false;
    if (node.data && node.data.year == 2012) {
      falg = true;
    }
    node.setSelected(falg);
  });
}
</script>
<template>
  <div class="box">
    <div class="text">
      <div>固定选中<q-chip square :ripple="false">年份=2012</q-chip>的行</div>
      <q-checkbox v-model="checkAllUsable" label="选择全部可选内容" dense />
      <span>已选择：{{ state.selected.join('，') }}</span>
    </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"
        :localeText="AG_GRID_LOCALE"
        :defaultColDef="defaultColDef"
        :columnDefs="columnDefs"
        :rowData="state.rowData"
        rowSelection="multiple"
        :suppressRowClickSelection="true"
        @grid-ready="onGridReady"
        @first-data-rendered="onFirstDataRendered"
        @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>