【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 

 查看package.json文件夹,出现以下安装效果代表安装成功

 二、在main.js中引入

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-balham.css';

 三、使用

<template><ag-grid-vuestyle="height: 300px; width: 810px"class="ag-theme-balham":columnDefs="columnDefs":rowData="rowData"@grid-ready="onGridReady"></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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/51103.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MATLAB打开excel读取写入操作例程

本文使用素材含代码测试用例等 MATLAB读写excel文件历程含&#xff0c;内含有测试代码资源-CSDN文库 打开文件 使用uigetfile函数过滤非xlsx文件&#xff0c;找到需要读取的文件&#xff0c;首先判断文件是否存在&#xff0c;如果文件不存在&#xff0c;程序直接返回&#x…

线上问诊:业务数据采集

系列文章目录 线上问诊&#xff1a;业务数据采集 文章目录 系列文章目录前言一、环境准备1.Hadoop2.Zookeeper3.Kafka4.Flume5.Mysql6.Maxwell 二、业务数据采集1.数据模拟2.采集通道 总结 前言 暑假躺了两个月&#xff0c;也没咋写博客&#xff0c;准备在开学前再做个项目找…

elementui表格嵌套上传文件直传到oss服务器(表单上传)

提示&#xff1a;记录项目中遇到的问题&#xff0c;仅供参考 文章目录 前言一、vue代码二、js接口请求代码 前言 项目需求是在表格中嵌套一个上传图片的功能&#xff0c;并且回显选择的图片和已上传的图片&#xff0c;再通过点击操作列中上传按钮才开始上传&#xff0c;使用的…

如遭遇DDoS等攻击会对企业和个人造成严重影响,包括以下

1. 服务不可用&#xff1a;正常用户无法访问目标服务器&#xff0c;导致业务中断&#xff0c;影响用户体验。 2. 数据泄露&#xff1a;攻击者可能会在攻击过程中窃取用户数据&#xff0c;导致隐私泄露和财产损失。 3. 经济损失&#xff1a;由于服务中断&#xff0c;企业可能遭受…

C语言刷题训练DAY.12

1.统计成绩 解题思路&#xff1a; 这里我们设置两个变量记录最大值和最小值&#xff0c;再用一个sum统计分数总和即可。 解题代码&#xff1a; #include<stdio.h> int main() {int n 0;scanf("%d", &n);double arr[100] { 0 };int i 0;//最高分double …

postgresql 数据排序

postgresql 常见操作 排序总结 排序 -- 排序的时候null是最大的值(看一下) select employee_id,manager_id from employeesorder by manager_id desc;-- nulls first使null值排在第一位 select employee_id,manager_id from employeesorder by manager_id nulls first;-- null…

财务数据分析用什么软件好?财务数据分析的几个重要数据是什么?

财务的数据分析也分很多种的&#xff0c;就拿最粗略的划分来说&#xff0c;也可以分为3大领域—— 财务数据处理类工具财务数据挖掘类工具财务数据可视化工具 01 数据处理类 在财务数据处理这一块儿&#xff0c;不用说&#xff0c;当然是以excel为主力的数据处理类工具—— …

Protobuf在IDEA中的插件安装教程

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

海思Hi3861L开发三-新建自定义项目

一、简介 上一篇文章,介绍了如何下载安装SDK,并且编译和下载。但都是基于SDK原生提供的demo。那本节我们就来介绍一下,如果创建一个自己的项目。 二、新建目录结构 先看SDK提供的目录结构,如下图: 因为是基于应用的开发,所以我们只关注app这个文件夹。可以看到…

纠缠辅助的量子网络:原理、技术、发展与挑战

7月11日&#xff0c;中国科大网络空间安全学院和陆军院士工作室李忠辉博士为第一作者、薛开平教授为通讯作者的量子网络综述论文“Entanglement-Assisted Quantum Networks: Mechanics, Enabling Technologies, Challenges, and Research Directions”在通信领域知名期刊《IEEE…

Ext JS 之Microloader(微加载器)

“Microloader”是 Sencha 数据驱动的 JavaScript 和 CSS 动态加载器的名称。 清单 app.json 用于应用的设置,Sencha Cmd 在构建的时候会读取这个文件。 Sencha Cmd 转换“app.json”的内容并将生成的清单传递给 Microloader 以在运行时使用。 最后,Ext JS 本身也会查阅运…

c++学习之内存管理

目录 1.c/c内存分布 2.new与delete/malloc与free c内存管理方式&#xff1a; new/delete操作内置类型&#xff1a; new/delete操作自定义类型 operator new与operator delete函数 new和delete的实现原理 内置类型 自定义类型 malloc/free和new/delete的区别 1.c/c内存分…

iPhone 14 Pro 动态岛的功能和使用方法详解

当iPhone 14 Pro机型发布时,苹果公司将软件功能与屏幕顶部的药丸状切口创新集成,称之为“灵动岛”,这让许多人感到惊讶。这篇文章解释了它的功能、工作原理,以及你如何与它互动以执行动作。 一、什么是灵动岛?它是如何工作的 在谣言周期的早期‌iPhone 14 Pro‌ 在宣布时…

js 模块 简单实验

1.代码 1.1 t2.js var year "test"; export { year }; 1.2 t1.js import { year } from ./t2.jsalert(year); 1.3 t.html <script type"module" src"./t1.js"></script> 2.运行结果

边缘计算节点BEC典型实践:如何快速上手PC-Farm服务器?

百度智能云边缘计算节点BEC&#xff08;Baidu Edge Computing&#xff09;基于运营商边缘节点和网络构建&#xff0c;一站式提供靠近终端用户的弹性计算资源。边缘计算节点在海外覆盖五大洲&#xff0c;在国内覆盖全国七大区、三大运营商。BEC通过就近计算和处理&#xff0c;大…

rust actix-web定义中间件(middleware)记录接口耗时(接口耗时中间件和鉴权中间件)

文章目录 Actix-web定义中间件(middleware)记录接口耗时中间件简介中间件添加的两种方式&#xff08;接口耗时中间件&#xff09;使用wrap_fn 闭包实现使用warp struct实现中间件调用顺序actix自带的接口耗时中间件 鉴权中间件 Actix-web定义中间件(middleware)记录接口耗时 …

性能测试工具Jmeter你所不知道的内幕

谈到性能测试&#xff0c;大家一定会联想到Jmeter和LoadRunner,这两款工具目前在国内使用的相当广泛&#xff0c;主要原因是Jmeter是开源免费&#xff0c;LoadRunner 11在现网中存在破解版本。商用型性能测试工具对于中小型企业很难承担相关的费用。国内的性能测试工具有&#…

solidity0.8.0的应用案例11:透明代理合约

选择器冲突 智能合约中,函数选择器(selector)是函数签名的哈希的前4个字节。例如mint(address account)的选择器为bytes4(keccak256("mint(address)")),也就是0x6a627842. 由于函数选择器仅有4个字节,范围很小,因此两个不同的函数可能会有相同的选择器,例如…

使用Nodejs创建简单的HTTP服务器,借助内网穿透工具实现公网访问的方法分享

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…

【LeetCode75】第三十二题 链表最大孪生和

目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 题目让我们求出链表的最大孪生和&#xff0c;那么什么是孪生和呢&#xff0c;就是对称的节点就是孪生节点&#xff0c;他们的和就是孪生和。 比如第一个节点的孪生节点就是最后一个节点&#xff0c;第二个节点的孪生节点…