ag-grid-vue的配置

ag-grid-vue 是一个基于 Vue.js 的表格组件，下面是一个常见的配置示例：

1. 安装 ag-grid 和 ag-grid-vue：

npm install --save ag-grid ag-grid-vue

2. 在 Vue 组件中引入 ag-grid 和 ag-grid-vue：

import { AgGridVue } from 'ag-grid-vue';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

3. 在 Vue 组件中使用 AgGridVue 组件并传入 props：

<template>
  <div class="ag-theme-alpine" style="height: 500px;">
    <ag-grid-vue :columnDefs="columnDefs"
                 :rowData="rowData"
                 :gridOptions="gridOptions">
    </ag-grid-vue>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  components: {
    AgGridVue,
  },
  data() {
    return {
      columnDefs: [
        { headerName: 'Make', field: 'make' },
        { headerName: 'Model', field: 'model' },
        { headerName: 'Price', field: 'price' }
      ],
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
      ],
      gridOptions: {
        // grid options...
      }
    };
  }
};
</script>

4. 根据需要配置 gridOptions，例如分页和排序：

gridOptions: {
  // 分页
  pagination: true,
  paginationPageSize: 10,
  // 排序
  defaultColDef: {
    sortable: true,
    sortingOrder: ['desc', 'asc'] // 默认降序排列
  }
}

这只是一个简单的示例，更多高级配置和 API 可以参考 ag-grid 的官方文档：https://www.ag-grid.com/vuejs-grid/