ag grid vue

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

<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-community/styles/ag-grid.css"; // Core grid CSS, always needed
import "ag-grid-community/styles/ag-theme-alpine.css"; // Optional theme CSS

export default {
  name: "App",
  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: "Boxster", price: 72000 },
      ],
    };
  },
};
</script>

解释说明：

1. 模板部分 (<template>):

   • 使用 <ag-grid-vue> 组件来创建一个 AG Grid 实例。
   • 设置了 style 和 class 属性，以定义网格的样式和主题（这里使用的是 ag-theme-alpine 主题）。
   • 通过 :columnDefs 和 :rowData 绑定数据，分别定义列配置和行数据。

2. 脚本部分 (<script>):

   • 导入 AgGridVue 组件以及必要的 CSS 文件。
   • 在 data 函数中定义了 columnDefs 和 rowData，分别用于描述表格的列和行数据。
   • columnDefs 是一个数组，每个元素定义了一列的标题和对应的数据字段。
   • rowData 是一个包含多行数据的对象数组，每行数据对应表格中的一行记录。