【ag-grid-vue】基本使用
ag-grid是一款功能和性能强大外观漂亮的表格插件,ag-grid几乎能满足你对数据表格所有需求。固定列、拖动列大小和位置、多表头、自定义排序等等各种常用又必不可少功能。关于收费的问题,绝大部分应用用免费的社区版就够了,ag-grid-community社区版一样功能强大,本教程所有功能都是基于ag-grid-community社区版本实现。
在本文中,我们将引导您完成将AG Grid(包括Community和Enterprise)添加到现有Vue项目的必要步骤,并配置它的一些基本特性。我们将向您展示网格的一些基础知识
一、在项目中添加ag-grid安装包
npm install --save ag-grid-community ag-grid-vue vue-property-decorator@^8.0.0
查看package.json文件夹,出现以下安装效果代表安装成功

二、在main.js中引入
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-balham.css';
// icon样式
import 'ag-grid-community/styles/ag-theme-alpine.css';

三、使用
<template><ag-grid-vuestyle="height: 300px; width: 810px"class="ag-theme-balham":columnDefs="columnDefs":rowData="rowData"></ag-grid-vue>
</template><script>
import { AgGridVue } from "ag-grid-vue";
export default {name: "AgTable",components: {AgGridVue,},data() {return {gridApi: null,columnDefs: [{headerName: "名称",field: "title",},{headerName: "网址",field: "url",},{headerName: "分类",field: "catalog",resizable: true,},{headerName: "PR",field: "pr",resizable: true,},],//需要显示的数据rowData: [{ title: "谷歌", url: "www.google", catalog: "搜索引擎", pr: 10 },{ title: "微软", url: "www.microsoft.com", catalog: "操作系", pr: 10 },{ title: "ITXST", url: "www.itxst.com", catalog: "小站", pr: 1 },{ title: "淘宝", url: "www.taobao.com", catalog: "电商", pr: 8 },],};}
};
</script><style lang="less" scoped></style>
四、效果

参考
英文文档:https://www.ag-grid.com/example/
中文文档:https://www.itxst.com/ag-grid/tutorial.html
相关文章:
【ag-grid-vue】基本使用
ag-grid是一款功能和性能强大外观漂亮的表格插件,ag-grid几乎能满足你对数据表格所有需求。固定列、拖动列大小和位置、多表头、自定义排序等等各种常用又必不可少功能。关于收费的问题,绝大部分应用用免费的社区版就够了,ag-grid-community社…...
学习JAVA打卡第四十四天
Scanner类 ⑴Scanner对象 scanner对象可以解析字符序列中的单词。 例如:对于string对象NBA 为了解析出NBA的字符序列中的单词,可以如下构造一个scanner对象。 将正则表达式作为分隔标记,即让scanner对象在解析操作时把与正则表达式匹配的字…...
Excel通用表头及单元格合并
要在Java中实现XLS文件中的通用表头合并和单元格合并,您可以使用Apache POI库。下面是一个示例代码,展示了如何实现这两个功能: import org.apache.poi.hssf.usermodel.*; import org.apache.poi.ss.usermodel.*;import java.io.FileOutputS…...
微信小程序 自定义全局事件监听实现
一般app页面都需要关联刷新,比如登录后刷新登录前页面,故此,需要一个全局事件监听类,怎么实现呢? 根目录创建文件夹utils,新建文件eventBus.js(致敬java平台的EventBus),…...
NC65 树表型参照 搜索全部 按钮点击事件后获取sql的方法
NC65 树表型参照 搜索全部 按钮点击事件后获取sql的方法。 /*** 返回 UIbtnLocQuery 特性值。* * return nc.ui.pub.beans.UIButton*/ /* 警告:此方法将重新生成。 */ private nc.ui.pub.beans.UIButton getUIbtnLocQuery() {// 搜索全部 按钮return getButtonPan…...
在SpringBoot使用MongoDB时出现的bug和解决
在springboot使用MongoDB时出现的bug和解决 在springboot整合MongoDB时,报错 在springboot整合MongoDB时,报错 INFO 67135 — [ main] org.mongodb.driver.connection : Closed connection [connectionId{localValue:2}] to 127.0.0.1:27017 because there was a socket excep…...
前端面试相关
HTML5 新特征 ✅ HTML5 与es6 新特性cookie 与 sessionStorage 和 localStorage 的区别 ✅Cookie 和localStorage、SessionStorage 区别事件冒泡和事件捕获 ✅ 事件捕获和事件冒泡垂直居中 DIV ✅ 元素垂直水平居中的多种办法(块级 行内元素)两栏布局左边…...
在ubuntu上部署label-studio
1. 安装label-studio 由于服务器的默认python3版本太低,尝试了很多方法,没有升级。因此采用annaconda方式安装label-studio. a.安装anaconda: 参照如下链接,安装anaconda。 Ubuntu安装Anaconda详细步骤(Ubuntu22.04.1ÿ…...
HashSet
HashSet集合底层采取哈希表存储数据 哈希表是一种对于增删改查数据性能都较好的结构 hashCode方法和equals方法的配合流程 当添加对象的时候,会先调用对象的hashCode方法计算出一个应该存入的索引位置,查看该位置上是否存在元素 不存在:直接存…...
Java-继承和多态(下)
补全构造方法 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);while (scanner.hasNextInt()) {int x scanner.nextInt();int y scanner.nextInt();int z scanner.nextInt();Sub sub new…...
Docker搭建并配置Prometheus
首先确保Linux已安装Docker,如未安装请先参考:Linux安装Docker 1.安装准备 创建挂载目录 /opt/prometheus/data目录,准备用来挂载放置prometheus的数据 /opt/prometheus/config目录,准备用来放置prometheus的配置文件 /opt/pro…...
“解放 Arweave“优惠:4EVERLAND的无缝上传教程
为了进一步展示 Arweave 的能力,4EVERLAND 骄傲地推出了“解放 Arweave”活动。我们认识到 Arweave 在数据完整性、抗审查性以及长期保存方面的无与伦比的优势,因此我们与这个去中心化的存储巨头建立了强大的集成。 克服了过去与加密货币支付逻辑相关的…...
系统学习Linux-LVS集群
集群概述 负载均衡技术类型 四层负载均衡器 也称为 4 层交换机,主要通过分析 IP 层及 TCP/UDP 层的流量实现基于 IP 加端口的负载均衡,如常见的 LVS、F5 等; 七层负载均衡器 也称为 7 层交换机,位于 OSI 的最高层,即…...
使用matplotlib绘制动图
主程序如下: 项目:701项目三分报告 作者:WN 内容:速度障碍法实现 时间:2023年8月26号import numpy as np import pandas as pd import matplotlib.pyplot as plt from matplotlib import animation from utils import *uav1 Agen…...
加油站ai视觉分析检测预警
加油站ai视觉分析预警系统通过yolov8图像识别和行为分析,加油站ai视觉分析预警算法识别出打电话抽烟、烟火行为、静电释放时间是否合规、灭火器摆放以及人员工服等不符合规定的行为,并发出预警信号以提醒相关人员。YOLOv8 的推理过程和 YOLOv5 几乎一样&…...
Docker构建镜像
Docker根据Dockerfile文件构建镜像 在实际生产中,常常使用Dockerfile构建企业级生产环境镜像,然后再部署在我们的生产环境中,本文将从从零开始介绍Dockerfile如何使用,构建镜像。 Dockerhub官网地址:https://registry.hub.docke…...
【太多网工对NAT还存在这4种误解!你是其中一个吗?】
NAT是解决公网地址不够用大家最熟悉的网络技术之一,而NAT最依赖的是NAT translation表项,至于NAT的概念和背景这里不再解释,网络上有很多关于此的类似介绍,自己搜索即可。下面主要是针对大家对NAT的一些误解进行分析。 1 误解一…...
React钩子函数之useEffect,useLayoutEffect与useInsertionEffect的区别
React钩子函数在React开发中扮演着非常重要的角色。其中,useEffect、useLayoutEffect和useInsertionEffect是三个常用的钩子函数,它们的作用虽然有些相似,但是也存在一些区别。在本文中,我们将详细介绍这三个钩子函数的区别&#…...
Unity——后期处理举例
Post Processing(后期处理)并不属于特效,但现代的特效表现离不开后期处理的支持。本文以眩光(Bloom)为例,展示一种明亮的激光的制作方法 1、安装后期处理扩展包 较新的Unity版本已经内置了新版的后期处理扩…...
PMP P-05 Quality Management
质量管理...
别再只用柱状图了!用Python的Matplotlib画个酷炫的雷达图,5分钟搞定你的个人技能展示
用Python打造专业级技能雷达图:5步提升你的职场竞争力 简历上那些千篇一律的柱状图和百分比条已经让招聘官审美疲劳了?试试用Matplotlib绘制一个令人眼前一亮的雷达图来展示你的核心技能组合。这种可视化方式不仅能清晰呈现你在各个领域的熟练程度&#…...
Vue3前端集成Gemma-3-12B-IT:构建智能聊天界面
Vue3前端集成Gemma-3-12B-IT:构建智能聊天界面 用最简单的方式,让你的Vue3项目拥有智能对话能力 1. 为什么要在Vue3中集成智能聊天功能 现在很多网站和应用都需要智能对话功能,不管是客服系统、学习助手还是内容创作工具。Gemma-3-12B-IT作为…...
AI应用架构师讲解AI在金融市场应用案例的模型构建
AI应用架构师讲解:AI在金融市场应用案例的模型构建 一、引入与连接:当AI成为金融市场的“智能分析师” 2023年,某头部量化基金的AI策略实现了35%的年化收益率,远超市场平均水平;同年,某国有银行用AI风险模型…...
Scarab:重构空洞骑士模组管理体验的技术实践
Scarab:重构空洞骑士模组管理体验的技术实践 【免费下载链接】Scarab An installer for Hollow Knight mods written in Avalonia. 项目地址: https://gitcode.com/gh_mirrors/sc/Scarab 问题溯源:模组管理的隐性成本与技术瓶颈 量化手动管理的效…...
从Dify到Coze再回来:一个后端开发用Gin+Swagger构建AI工作流的踩坑实录
从Dify到Coze再回来:一个后端开发用GinSwagger构建AI工作流的踩坑实录 作为一名长期使用Gin框架的后端开发者,当我第一次尝试将现有服务接入Dify平台构建AI工作流时,本以为会是一次顺畅的旅程。毕竟,我们的API已经通过Swagger 2.0…...
Mac用户的移动Win10工坊:从WTG配置到驱动、激活、文件共享的完整避坑指南
Mac用户的移动Win10工坊:从WTG配置到驱动、激活、文件共享的完整避坑指南 当Mac用户需要运行Windows应用时,双系统方案往往是最佳选择。而通过Windows To Go(WTG)技术将Win10安装在移动硬盘上,不仅保留了Mac原生系统的…...
洛雪音乐音源修复实战指南:从零开始的插件化解决方案
洛雪音乐音源修复实战指南:从零开始的插件化解决方案 【免费下载链接】New_lxmusic_source 六音音源修复版 项目地址: https://gitcode.com/gh_mirrors/ne/New_lxmusic_source 当你点击播放按钮却只看到加载动画无限循环,当搜索结果永远停留在&qu…...
如何用baidupankey解决百度网盘提取码获取难题
如何用baidupankey解决百度网盘提取码获取难题 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 引言:被提取码困住的日常 "又要找提取码?"小张盯着电脑屏幕上的百度网盘分享链接,…...
C++ 中this的秘密
class Test {public:void test() {test1();}void test1() {i = 10...
打造沉浸式音乐体验:Apple Music-Like Lyrics 全栈技术指南
打造沉浸式音乐体验:Apple Music-Like Lyrics 全栈技术指南 【免费下载链接】applemusic-like-lyrics 一个基于 Web 技术制作的类 Apple Music 歌词显示组件库,同时支持 DOM 原生、React 和 Vue 绑定。 项目地址: https://gitcode.com/gh_mirrors/ap/a…...
