【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;企业可能遭受…

放大电路【笔记】

直接耦合 电路之间信号的传递叫耦合&#xff0c;输入和输出都是通过放大电路直接连接&#xff0c;没经过滤波等手段的处理 先有直流的部分&#xff1a;直流的Ube有直流的Ib&#xff0c;直流的Ib有直流的Ic&#xff0c;直流的Ic有直流的Uce。 再有交流的部分&#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…

python 基础篇 day 4 选择结构—— if 结构

文章目录 if 基础结构单 if 语句if-else 语句if-elif-else 语句嵌套的 if 语句 if 进阶用法使用比较运算符使用逻辑运算符使用 in 关键字range() 函数使用 is 关键字使用 pass 语句 三目运算符语法例子注意补充举例注意 if 基础结构 单 if 语句 if 条件: 执行条件为真时的代码…

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

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

【vue2】前端实现下载后端返回的application/octet-stream文件流

1、下载csv/txt时 此时无须修改接口的响应格式 let filenameRegex /filename[^;\n]*((["]).*?\2|[^;\n]*)/; let matches filenameRegex.exec(data.headers[content-disposition]); let blob new Blob([\uFEFF data.data], {//目前只有csv格式type: text/csv;charse…

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

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 本身也会查阅运…

什么是cssreset ?为什么要用到cssreset?

1&#xff0c;什么是cssreset ? 顾名思义&#xff0c;css reset&#xff0c;样式重置。即重新设置界面的样式。 CSS reset&#xff0c;又叫做 CSS 重写或者 CSS 重置&#xff0c;用于改写HTML标签的默认样式。 有些HTML标签在浏览器里有默认的样式&#xff0c;例如 p 标签有上…

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内存分…

音视频 ffplay命令-高级选项

选项说明-stats打印多个回放统计信息&#xff0c;包括显示流持续时间&#xff0c;编解码器参数&#xff0c;流中的当前位置&#xff0c;以及音频/视频同步差值。默认情况下处于启用状态&#xff0c;要显式禁用它则需要指定-nostats-fast非标准化规范的多媒体兼容优化-genpts生成…

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.运行结果

我们在选择服务器的时候,经常会看到单线服务器,多线服务器和BGP服务器,那这些线路的服务器有存在哪些不同呢?

我们在选择服务器的时候&#xff0c;经常会看到单线服务器&#xff0c;多线服务器和BGP服务器&#xff0c;那这些线路的服务器有存在哪些不同呢&#xff1f; 单线 所谓的单线服务器是单网卡单个IP&#xff0c;指只有电信、联通或者移动一条线路。 缺点&#xff1a;由于线路单一…