IndexPage.vue

<!--
 * 表单 表格 
  -->
<script lang="ts">
export default {
  name: 'FORM_TEST',
};
</script>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';
import { cloneDeep } from 'src/common/utils';
import AG_GRID_LOCALE from 'src/config/ag-grid-locale';

import { defaultColDef, testData } from './config';

import FormDialog from './element/FormDialog.vue';

const formDialogRef = ref<any>(null);

const gridApi = ref<any>(null);
const gridColumnApi = ref<any>(null);

const columnDefs = reactive([
  { field: 'name', headerName: '姓名' },
  { field: 'age', headerName: '年龄' },
]);

const state = reactive({
  rowData: [] as any,
});

function onGridReady(params: any) {
  gridApi.value = params.api;
  gridColumnApi.value = params.columnApi;
  getData();
}

function getData() {
  state.rowData = cloneDeep(testData);
}

function clickAdd() {
  formDialogRef.value.openDialog();
}

function viewData() {
  console.log('查看', state.rowData);
}
</script>
<template>
  <div class="box">
    <div class="actions">
      <q-btn unelevated color="primary" label="添加" @click="clickAdd" />
      <q-btn unelevated color="primary" label="查看" @click="viewData" />
    </div>
    <div class="ag-table">
      <ag-grid-vue
        style="height: 550px"
        class="ag-theme-alpine"
        :animateRows="true"
        :localeText="AG_GRID_LOCALE"
        :suppressContextMenu="true"
        :suppressCellFocus="true"
        :defaultColDef="defaultColDef"
        :columnDefs="columnDefs"
        :rowData="state.rowData"
        @grid-ready="onGridReady"
      >
      </ag-grid-vue>
    </div>
    <form-dialog ref="formDialogRef" />
  </div>
</template>

<style lang="scss" scoped>
.actions {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;
}
.ag-table {
  padding: 0 10px 10px 10px;
}
</style>