ag-grid | 一款基于vuejs的数据表格组件

AG Grid 是一款基于vuejs的数据表格组件，用于在Web应用程序中创建数据网格。

AG Grid数据表格的特点有：

• 列交互：调整、重新排序和固定列
• 分页、排序、行选择
• 分组/聚合
• 辅助功能支持
• 单元格内编辑
• 记录懒加载
• 服务器端记录操作
• 实时流更新
• 层次结构数据支持和树形视图
• 可自定义外观
• 可自定义单元格内容
• 状态持久化
• 键盘导航
• 数据导出到 CSV
• 数据导出到 Excel
• 像 Excel 一样的数据透视
• 行重新排序
• 复制/粘贴
• 列跨度/固定行/全宽行
• 集成图表
• 迷你图表

使用方法

安装

如果您想使用 ag grid数据表格，首先您需要安装它，命令如下：

npm install --save ag-grid-community ag-grid-vue3
		

使用

示例代码：

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

import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
// 在vue3 中使用，需要从ag-grid-vue3包中导入
import { AgGridVue } from "ag-grid-vue3";

export default {
  name: "App",
  components: {
    AgGridVue,
  },
  setup() {
    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 },
      ],
    };
  }
};
		

更多详情请参考官网https://www.ag-grid.com/vue-data-grid/getting-started/

github网址：https://github.com/ag-grid/ag-grid