<!-- * AG-grid学习 * https://www.ag-grid.com/vue-data-grid/getting-started/ --> <script setup lang="ts"> import { h, ref, reactive, onMounted } from 'vue'; import { AgGridVue } from 'ag-grid-vue3'; import AgGridStudyCom from './AgGridStudyCom.vue'; const defaultColDef = { sortable: true, filter: true, enableRowGroup: true, }; const SimpleComp = { setup(props: any) { const { params } = props; return () => h('span', { class: 'text-red' }, params.value); }, }; const gridApi = ref<any>(null); const state = reactive({ columnDefs: [ { field: 'age' }, { field: 'year' }, { field: 'country', cellRenderer: AgGridStudyCom, cellRendererParams: { config: { color: 'primary', textColor: 'white', square: true, }, }, }, { field: 'sport', cellRenderer: SimpleComp, }, { field: 'gold' }, { field: 'silver' }, { field: 'bronze', cellRendererSelector: (data: any) => { if (data.value > 2) { return { component: SimpleComp }; } else { return { component: AgGridStudyCom, params: { config: { square: true } }, }; } }, }, ], rowData: [], }); onMounted(() => { fetch('https://www.ag-grid.com/example-assets/olympic-winners.json') .then((result) => result.json()) .then((remoteRowData) => (state.rowData = remoteRowData)); }); function cellWasClicked(event: any) { console.log('cellWasClicked >>>>', event); } function onGridReady(params: any) { gridApi.value = params.api; } function deselectRows() { gridApi.value.deselectAll(); } </script> <template> <div class="box"> <div> <q-btn label="取消选择行" color="primary" @click="deselectRows" /> </div> <!-- rowSelection="multiple":多选,按住control键多选;【control+shift+鼠标点击】可选中多行 animateRows=true:启用行动画 分组:https://ag-grid.com/vue-data-grid/grouping-group-panel/ 【rowGroup: true】 【enableRowGroup: true】 【rowGroupPanelShow="always"】 --> <div> <ag-grid-vue style="height: 500px" class="ag-theme-alpine" :columnDefs="state.columnDefs" :rowData="state.rowData" :defaultColDef="defaultColDef" rowSelection="multiple" :animateRows="true" rowGroupPanelShow="always" @cell-clicked="cellWasClicked" @grid-ready="onGridReady" > </ag-grid-vue> </div> </div> </template> <style lang="scss" scoped></style>