“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，[点击查看活动详情](https://s.juejin.cn/ds/jooSN7t "https://s.juejin.cn/ds/jooSN7t")” ## 一、前言我在项目中遇到这么一个难点，订单数据5w+,数据字段在100-250之间，列可拖动，可固定，行数据自适应，用户可自定义字段，可排序，前端分页，可根据所有字段做模糊搜索等。我在实际项目中所采用的表格为ag-grid-vue，因为关于ag-grid-vue表格的中文文档和示例都比较少，这里希望给大家做个参考。本文作为总结和分享。当然，也有其他的表格，请移步到我上期提到的[Vue大数据表格](https://juejin.cn/post/7138416565212413983) ag-grid中文教程：[www.itxst.com/ag-grid/nqr…](https://link.juejin.cn/?target=https%3A%2F%2Fwww.itxst.com%2Fag-grid%2Fnqrfnuzz.html "https://www.itxst.com/ag-grid/nqrfnuzz.html") ag-grid官方Demo： [www.ag-grid.com/example/](https://link.juejin.cn/?target=https%3A%2F%2Fwww.ag-grid.com%2Fexample%2F "https://www.ag-grid.com/example/") ag-grid相关文章： [blog.csdn.net/wqearl/cate…](https://link.juejin.cn/?target=https%3A%2F%2Fblog.csdn.net%2Fwqearl%2Fcategory_10088149.html "https://blog.csdn.net/wqearl/category_10088149.html") ## 二、ag-grid-vue实际效果最终效果图如下， ![2.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93a8e290839a475a83453c5c8540c9d4~tplv-k3u1fbpfcp-watermark.image?) > 【注意】如果这里我做过多的讲解，可能大家听不懂，所以我做了细分 ## 三、ag-grid-vue安装安装 ``` npm install ag-grid-vue npm install ag-grid-community ``` 安装版本 ``` "ag-grid-community": "^27.0.1", "ag-grid-vue": "27.1.0", ``` ## 四、ag-grid-vue简单示例效果图 ![4.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/857fbf770cc54ac1bb904ad71cc82519~tplv-k3u1fbpfcp-watermark.image?) 示例代码： ``` ``` > 以上的简单示例，可能已经满足大部分人的需求了，所有属性的介绍都放置于代码中，请放心食用前端人，fish is you ![1662272014218.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ab0a1948b7f40cf90dcf18c4c3b7b1b~tplv-k3u1fbpfcp-watermark.image?) 完结散花...