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
<!--
* AG-grid 表格树
* https://www.ag-grid.com/vue-data-grid/tree-data/
-->
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';
import AG_GRID_LOCALE from 'src/config/ag-grid-locale';
import { getData } from '../config';
const defaultColDef = {
resizable: true,
flex: 1,
suppressMenu: false, // 是否禁用标题行菜单
};
const gridApi = ref<any>(null);
const gridColumnApi = ref<any>(null);
const state = reactive({
columnDefs: [
{ field: 'title', headerName: '繁体' },
{ field: 'origin', headerName: '英文' },
],
rowData: [] as any,
});
const autoGroupColumnDef = reactive({
headerName: '名称',
minWidth: 300,
cellRendererParams: {
suppressMenu: true,
},
});
onMounted(() => {
setTimeout(() => {
state.rowData = getData();
console.log('rowData', state.rowData);
}, 1000);
});
function onGridReady(params: any) {
gridApi.value = params.api;
gridColumnApi.value = params.columnApi;
}
function getDataPath(data: any) {
return data.type;
}
</script>
<template>
<div class="box">
<!--
rowSelection="multiple"：多选，按住control键多选；【control+shift+鼠标点击】可选中多行
animateRows=true：启用行动画
:masterDetail="true" 启用展开的细节网格行
:isRowMaster="isRowMaster" 确定哪一个行该展开
-->
<div>
<ag-grid-vue
style="height: 500px"
class="ag-theme-alpine"
:localeText="AG_GRID_LOCALE"
:columnDefs="state.columnDefs"
:rowData="state.rowData"
:defaultColDef="defaultColDef"
:animateRows="true"
:pagination="true"
:paginationPageSize="5"
@grid-ready="onGridReady"
:treeData="true"
:getDataPath="getDataPath"
:autoGroupColumnDef="autoGroupColumnDef"
:groupDefaultExpanded="-1"
>
</ag-grid-vue>
</div>
</div>
</template>
<style lang="scss" scoped></style>