AgGridTreeData.vue

<!--
 * 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>