# @ag-grid-community/vue 中文文档
规范地址：https://npmcn.com/package/%40ag-grid-community/vue/
版本：31\.3\.4
npm 元数据更新时间：2024-07-16T13:08:40.226Z
中文译文更新时间：2026-11-05T21:43:39.814Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40ag-grid-community/vue
原文对照：https://npmcn.com/package/%40ag-grid-community/vue/?lang=original
项目主页：https://www.ag-grid.com/
源码仓库：https://github.com/ag-grid/ag-grid
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：61.1 kB，16 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@ag-grid-community/core 31\.3\.4，vue \>= 2\.2 \<= 2\.5\.17 \|\| \>= 2\.5\.20，vue-property-decorator ^7\.2\.0 \|\| ^8\.0\.0 \|\| ^9\.1\.2
- 首次发布：2019-11-05T10:34:18.939Z
- 最新版本发布：2024-07-16T13:08:39.993Z
- 近 30 天下载量：16751（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：62（近 12 个月 0 个）
## 中文简介
AG 网格 Vue 2 组件
## 安装
```sh
npm install @ag-grid-community/vue
```
也可以使用：`pnpm add @ag-grid-community/vue`、`yarn add @ag-grid-community/vue`、`bun add @ag-grid-community/vue`
## README
[](https://cdnjs.com/libraries/ag-grid) [](https://www.npmjs.com/package/@ag-grid-community/vue) [](https://www.npmjs.com/package/@ag-grid-community/vue)
# AG 网格 Vue 组件
AG Grid是一个全版和高度自定义的JavaScript数据网格. 它能提供 [杰出业绩](https://www.ag-grid.com/example?utm_source=@ag-grid-community/vue-readme&utm_medium=repository&utm_campaign=github),没有第三方依赖关系,并且 [与 Vue 顺利整合](https://www.ag-grid.com/vue-data-grid/getting-started/?utm_source=@ag-grid-community/vue-readme&utm_medium=repository&utm_campaign=github)。 。 。 .
以下是我们使用多个过滤器和分组功能的网格外观:
## 特征
除了从任意网格中期待的一套标准特性外:
- 列相互作用(大小调整、顺序调整和指针列)
- 倾斜
- 排序
- 行选择
以下是AG Grid突出的一些特征:
- 分组/汇总\*
- 无障碍支持
- 自定义过滤
- 本地单元格编辑
- 记录懒惰装入\*
- 服务器- Side 记录操作 \*
- 直播流更新
- 等级数据支持和树视图 \*
- 自定义外观
- 自定义单元格内容
- 状态持久性
- 键盘导航
- 数据导出为 CSV
- 数据导出为 Excel \*
- 类似外壳的支点 \*
- 行重排顺序
- 复制/ 粘贴
- 列宽
- 固定行
- 全宽行
- 集成图
- 闪光线
\* 标有星号的特征可在 [企业版](https://www.ag-grid.com/license-pricing?utm_source=@ag-grid-community/vue-readme&utm_medium=repository&utm_campaign=github) 只有这个.
看看这个 [开发者文档](https://www.ag-grid.com/vue-data-grid/?utm_source=@ag-grid-community/vue3-readme&utm_medium=repository&utm_campaign=github) 完整的特征清单或访问清单 [我们的官方文件](https://www.ag-grid.com/vue-data-grid/grid-features/?utm_source=@ag-grid-community/vue3-readme&utm_medium=repository&utm_campaign=github) 用于教学和功能演示.
## 开始
使用下面的设置指令或通过 [5分钟快速启动指南](https://www.ag-grid.com/vue-data-grid/getting-started/?utm_source=@ag-grid-community/vue-readme&utm_medium=repository&utm_campaign=github)。 。 。 .
### 安装依赖关系
```sh
$ npm install --save @ag-grid-community/core @ag-grid-community/vue
```
### 导入 `AgGridVue` 构成部分
```ts
import { AgGridVue } from "@ag-grid-community/vue";
```
### 导入样式
```ts
import "@ag-grid-community/styles/ag-grid.css";
import "@ag-grid-community/styles/ag-theme-quartz.css";
```
### 在父组件中设置网格配置
```ts
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 },
],
};
},
};
```
### 调整网格
```html
```
### 完整实例 :
```html
```
## 问题报告
如果您找到错误, 请在此仓库中报告 [问题](https://github.com/ag-grid/ag-grid/issues) 节。 如果你使用企业号版本,请使用 [私人购票](https://ag-grid.zendesk.com/) 系统可以做到这一点.
## 问问题
寻找类似的问题 [叠叠流](https://stackoverflow.com/questions/tagged/ag-grid) 使用 `ag-grid` 标签。 如果看起来没什么关系,就在那里发布新的信息。 请不要使用 GitHub 问题来提问 .
## 捐款
AG Grid由伦敦的同地开发者团队开发. 狦稱舱麓 碞р application癳 [数据信息@ag-grid.com](mailto:info@ag-grid.com)。 。 。 .
## 许可证
这个项目根据麻省理工学院的许可证获得许可。 见 [自由文件](https://npmcn.com/package/%40ag-grid-community/vue/LICENSE.txt) 需要更多信息.
## 常见问题
### @ag-grid-community/vue 是什么？
AG 网格 Vue 2 组件
### 如何安装 @ag-grid-community/vue？
在项目目录运行 npm install @ag-grid-community/vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@ag-grid-community/core（31\.3\.4）、vue（\>= 2\.2 \<= 2\.5\.17 \|\| \>= 2\.5\.20）、vue-property-decorator（^7\.2\.0 \|\| ^8\.0\.0 \|\| ^9\.1\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @ag-grid-community/vue 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @ag-grid-community/vue 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @ag-grid-community/vue 可以商用吗？
@ag-grid-community/vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @ag-grid-community/vue 的下载量有多少？
根据 npm 官方下载统计，@ag-grid-community/vue 在 2026/10/05 – 2026/11/03 这 30 天内被下载 16,751 次，日均约 558 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @ag-grid-community/vue 还在维护吗？
最新版本 31\.3\.4 发布于 2024/07/16（2 年前）；至今共发布 62 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/11/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。