vue集成ag-grid框架

news/2024/10/31 5:29:53/

VUE2集成方案

1.创建vue项目
2.添加依赖

npm install --save ag-grid-community ag-grid-vue vue-property-decorator@^8.0.0

3.在src/App.vue添加样式

<style lang="scss">@import "~ag-grid-community/dist/styles/ag-grid.css";@import "~ag-grid-community/dist/styles/ag-theme-alpine.css";
</style>

4.在vue文件添加模板代码

<template><ag-grid-vue style="width: 500px; height: 500px;"class="ag-theme-alpine":columnDefs="columnDefs":rowData="rowData"></ag-grid-vue>
</template>
<script>
import { AgGridVue } from "ag-grid-vue";export default {name: "App",data() {return {columnDefs: null,rowData: null,};},components: {AgGridVue,},beforeMount() {this.columnDefs = [{ field: "make" },{ field: "model" },{ field: "price" },];this.rowData = [{ make: "Toyota", model: "Celica", price: 35000 },{ make: "Ford", model: "Mondeo", price: 32000 },{ make: "Porsche", model: "Boxter", price: 72000 },];},
};
</script>
<style lang="scss">@import "~ag-grid-community/dist/styles/ag-grid.css";@import "~ag-grid-community/dist/styles/ag-theme-alpine.css";
</style>

集成侧边栏

<div style="height: 100%"><ag-grid-vuestyle="width: 100%; height: 100%;"class="ag-theme-alpine"id="myGrid":columnDefs="columnDefs"@grid-ready="onGridReady":defaultColDef="defaultColDef":sideBar="sideBar":rowData="rowData"></ag-grid-vue>
</div>data(){return {defaultColDef: {flex: 1,minWidth: 100,enableValue: true,enableRowGroup: true,enablePivot: true,sortable: true,filter: true,},sideBar: true,columnDefs:[],rowData: null,}
}

VUE3集成方案

1.创建vue项目
2.添加依赖

npm install ag-grid-vue3 ag-grid-community vue-class-component@next

3.在src/App.vue添加样式

<style lang="scss">@import "~ag-grid-community/dist/styles/ag-grid.css";@import "~ag-grid-community/dist/styles/ag-theme-alpine.css";
</style>

4.在vue文件添加模板代码

<template><ag-grid-vuestyle="width: 500px; height: 200px"class="ag-theme-alpine":columnDefs="columnDefs":rowData="rowData"></ag-grid-vue>
</template><script>
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";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: "Boxter", price: 72000 },],};},
};
</script>

ag-grid破解

//破解ag-grid
import 'ag-grid-enterprise';
import {LicenseManager} from 'ag-grid-enterprise'
LicenseManager.prototype.validateLicense = function(){return true
}

http://www.ppmy.cn/news/516817.html

相关文章

AG35车规级模组

AG35 包含 AG35-CE、AG35-E、AG35-NA、AG35-LA 和 AG35-J 五个版本&#xff1a; AG35基于高通MDM9628车载前装芯片研发&#xff0c;严格按照 IATF 16949:2016 汽车行业质量管理体系标准而制造&#xff0c;并在整个生命周期内完全遵循车规级产品的质量流程&#xff0c;包括PPAP…

ag-grid 单元格编辑-下拉框

一、基本下拉框 效果如下&#xff1a; 选中后的值直接就是界面显示的值&#xff08;也是代码中定义的值&#xff09;。效果如下&#xff1a; 二、有id 的下拉框 这个下拉框跟平常用的select 框类似&#xff0c;设置id和value&#xff0c;在界面选择的时候显示的是value值&#…

Linux ag命令的安装及使用

一、ag命令安装 yum -y install the_silver_searcher二、ag命令常用参数 ag命令类似grep 和 find&#xff0c;但是执行效率比grep、find高。 ag -g <File Name> 类似于 find . -name <File Name> [rootserver01 etc]# ag -g passwd security/opasswd passwd- pass…

vue2.6 Ag-grid 使用

中文文档&#xff1a;ag-grid中文教程 - itxst.com 一.HTML 结构 <ag-grid-vueclass"ag-theme-alpine"id"myGrid":rowData"rowData" //数据源cellEditingStopped"onCellEditingStopped" // 输入停止直接执行 数据保存事件:gridOp…

TypeScript的基础类型

1. boolean类型&#xff1a; boolean表示布尔值类型&#xff0c;即true和false。例&#xff1a; let isDone: boolean false;2. number类型&#xff1a; number表示数字类型&#xff0c;包括整数和浮点数。例&#xff1a; let decimal: number 6; let hex: number 0xf00…

ag-grid 自适应大小

ag-grid 表格需要自适应浏览器窗口大小&#xff0c;以下为没有自适应的情况&#xff1a; 以下为已经自适应的情况&#xff1a; 如果需要自适应&#xff0c;统一调用api&#xff1a;sizeColumnsToFit() 即可&#xff0c;只不过调用的触发事件不同。 分别有以下三种情况出现&…

快速上手最棒的网格框架ag-Grid

2020/03补充&#xff1a;本文是AgGrid的使用教程及入门手册&#xff0c;如果想了解Aggrid的开发理念和设计思想&#xff0c;可以参考我最新的文章&#xff1a;《AgGrid框架的使用感受及前景分析》 由于对aggrid由衷的感谢, 又忍不住写了一篇软文来推广它(其实主要是为了弥补我把…

使用ag-grid的cellRenderer渲染单元格

使用ag-grid的cellRenderer渲染单元格 这里只是一个简单的例子&#xff0c;具体如何使用&#xff0c;还得看官方文档 https://www.ag-grid.com/javascript-grid-cell-rendering/?frameworkangular 1.在需要渲染的单元格基本信息中添加一个组件 { headerName: "Square&quo…