1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!--
* 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', headerName: '年龄' },
{ 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>