<!-- * 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 AG_GRID_LOCALE from 'src/config/ag-grid-locale'; import AgGridStudyCom from './AgGridStudyCom.vue'; import AgGridStudyYearFilter from './AgGridStudyYearFilter.vue'; /** * filter 过滤器 * https://ag-grid.com/vue-data-grid/filtering/#provided-filters * * agNumberColumnFilter: 一个用于数字比较的过滤器 * agTextColumnFilter: 一个用于字符串比较的过滤器 * agDateColumnFilter: 一个用于日期比较的过滤器 * agSetColumnFilter: 一个受Microsoft Excel中过滤器工作方式影响的过滤器。这是一个AG网格企业的功能。 * **/ const defaultColDef = { flex: 1, filterParams: { buttons: ['apply', 'reset', 'clear'], // debounceMs: 0, // 当`apply`按钮存在时,`debounceMs`被忽略 }, floatingFilter: true, }; const SimpleComp = { setup(props: any) { const { params } = props; return () => h('span', { class: 'text-red' }, params.value); }, }; const gridApi = ref<any>(null); const savedFilterModel = ref<any>(null); const state = reactive({ columnDefs: [ { field: 'age', headerName: '年龄', filter: 'agNumberColumnFilter' }, // { field: 'year', filter: 'agSetColumnFilter' }, // 企业版 https://ag-grid.com/vue-data-grid/filter-set/ { field: 'year', headerName: '年份', filter: AgGridStudyYearFilter, filterParams: { title: '标题', }, }, { field: 'date', headerName: '日期', filter: 'agDateColumnFilter', // https://ag-grid.com/vue-data-grid/filter-date/#date-filter-comparator // add extra parameters for the date filter filterParams: { // provide comparator function comparator: (filterLocalDateAtMidnight: any, cellValue: any) => { const dateAsString = cellValue; if (dateAsString == null) { return 0; } // In the example application, dates are stored as dd/mm/yyyy // We create a Date object for comparison against the filter date const dateParts = dateAsString.split('/'); const year = Number(dateParts[2]); const month = Number(dateParts[1]) - 1; const day = Number(dateParts[0]); const cellDate = new Date(year, month, day); // Now that both parameters are Date objects, we can compare if (cellDate < filterLocalDateAtMidnight) { return -1; } else if (cellDate > filterLocalDateAtMidnight) { return 1; } return 0; }, }, }, { field: 'country', headerName: '国家', filter: 'agMultiColumnFilter', // 企业版 https://ag-grid.com/vue-data-grid/filter-multi/ cellRenderer: AgGridStudyCom, cellRendererParams: { config: { color: 'primary', textColor: 'white', square: true, }, }, }, { field: 'sport', headerName: '运动', cellRenderer: SimpleComp, }, { field: 'gold', headerName: '金牌' }, { field: 'silver', headerName: '银牌' }, { field: 'bronze', headerName: '铜牌', cellRendererSelector: (data: any) => { if (data.value < 2) { return { component: SimpleComp }; } else { return { component: AgGridStudyCom, params: { config: { square: true } }, }; } }, }, ], rowData: [], popupParent: document.body, // https://ag-grid.com/vue-data-grid/column-menu/#popup-parent }); 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(); } function savaFilterState() { const filterModel = gridApi.value.getFilterModel(); savedFilterModel.value = filterModel; } function applyFilterState() { const filterModel = savedFilterModel.value; gridApi.value.setFilterModel(filterModel); } </script> <template> <div class="box"> <div> <q-btn label="取消选择行" color="primary" @click="deselectRows" /> <q-btn label="保存" color="primary" @click="savaFilterState" /> <q-btn label="应用" color="primary" @click="applyFilterState" /> </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" :localeText="AG_GRID_LOCALE" :popupParent="state.popupParent" :columnDefs="state.columnDefs" :rowData="state.rowData" :defaultColDef="defaultColDef" :animateRows="true" @cell-clicked="cellWasClicked" @grid-ready="onGridReady" > </ag-grid-vue> </div> </div> </template> <style lang="scss" scoped></style>