AG 网格 Vue 组件

AG Grid是一个全版和高度自定义的JavaScript数据网格. 它能提供 杰出业绩,没有第三方依赖关系,并且 与 Vue 顺利整合。 。 。 .

以下是我们使用多个过滤器和分组功能的网格外观:

特征

除了从任意网格中期待的一套标准特性外:

• 列相互作用(大小调整、顺序调整和指针列)
• 倾斜
• 排序
• 行选择

以下是AG Grid突出的一些特征:

• 分组/汇总*
• 无障碍支持
• 自定义过滤
• 本地单元格编辑
• 记录懒惰装入*
• 服务器- Side 记录操作 *
• 直播流更新
• 等级数据支持和树视图 *
• 自定义外观
• 自定义单元格内容
• 状态持久性
• 键盘导航
• 数据导出为 CSV
• 数据导出为 Excel *
• 类似外壳的支点 *
• 行重排顺序
• 复制/ 粘贴
• 列宽
• 固定行
• 全宽行
• 集成图
• 闪光线

* 标有星号的特征可在 企业版 只有这个.

看看这个 开发者文档 完整的特征清单或访问清单 我们的官方文件 用于教学和功能演示.

开始

使用下面的设置指令或通过 5分钟快速启动指南。 。 。 .

安装依赖关系

$ npm install --save @ag-grid-community/core @ag-grid-community/vue

导入 AgGridVue 构成部分

import { AgGridVue } from "@ag-grid-community/vue";

导入样式

import "@ag-grid-community/styles/ag-grid.css";
import "@ag-grid-community/styles/ag-theme-quartz.css";

在父组件中设置网格配置

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 },
      ],
    };
  },
};

调整网格

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

完整实例 :

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

<script>
import "@ag-grid-community/styles/ag-grid.css";
import "@ag-grid-community/styles/ag-theme-quartz.css";
import { AgGridVue } from "@ag-grid-community/vue";

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 },
      ],
    };
  },
};
</script>

问题报告

如果您找到错误, 请在此仓库中报告 问题 节。 如果你使用企业号版本,请使用 私人购票 系统可以做到这一点.

问问题

寻找类似的问题 叠叠流 使用 ag-grid 标签。 如果看起来没什么关系,就在那里发布新的信息。 请不要使用 GitHub 问题来提问 .

捐款

AG Grid由伦敦的同地开发者团队开发. 狦稱舱麓 碞р application癳 数据信息@ag-grid.com。 。 。 .

许可证

这个项目根据麻省理工学院的许可证获得许可。 见 自由文件 需要更多信息.