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


源码介绍

简要教程

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

AG Grid数据表格的特点有:

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

ag grid

使用方法

安装

如果您想使用 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



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部