如何在 Vue.js 中使用 Ag-Grid
介绍
在本文中，我们将学习如何在 Vue.js 应用程序中使用 ag-grid。ag-Grid 是一个用于以表格格式显示数据的组件。通过使用 ag-Grid，开发人员可以根据自己的需求轻松扩展功能。
前提条件
- Vue.js 基础知识
- 在系统上安装Visual Studio Code IDE
- HTML和CSS的基础知识
创建 Vue.js 项目
使用以下命令创建 Vue.js 项目。
vue create syndatagrid在 Visual Studio Code 中打开新创建的项目并使用以下命令安装 ag-Grid。
npm install ag-grid-vue3 ag-grid-community vue-class-component@next现在使用以下命令在此项目中安装bootstrap程序。
npm install bootstrap-vue bootstrap --save打开 main.js 文件并导入bootstrap reference。
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'现在打开 app.vue 文件。在 app.vue 组件中添加以下代码。
<template>
<div class="row" style="margin-top:10px">
<div class="col-sm-12 btn btn-info">
Add ag-Grid to VueJS App
</div>
</div>
<ag-grid-vue style="height: 500px;"
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 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { AgGridVue } from "ag-grid-vue3";
export default {
name: "App",
components: {
AgGridVue,
},
setup() {
return {
columnDefs: [
{ headerName: "Id", field: "Id", sortable: true, filter: true },
{ headerName: "Name", field: "Name", sortable: true, filter: true },
{ headerName: "Age", field: "Age", sortable: true, filter: true },
{ headerName: "Address", field: "Address", sortable: true, filter: true },
{ headerName: "City", field: "City", sortable: true, filter: true },
{ headerName: "Salary", field: "Salary", sortable: true, filter: true },
{ headerName: "Department", field: "Department", sortable: true, filter: true }
],
rowData: [
{
Id: "100",
Name: "Sanwar",
Age: "25",
Address: "Jaipur",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "2",
Name: "Nisha",
Age: "25",
Address: "C-Scheme",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "3",
Name: "David",
Age: "25",
Address: "C-Scheme",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "4",
Name: "Sam",
Age: "25",
Address: "C-Scheme",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "5",
Name: "Jyotsna",
Age: "25",
Address: "C-Scheme",
City: "Mumbai",
Salary: "500000",
Department: "IT",
},
{
Id: "6",
Name: "Sid",
Age: "25",
Address: "C-Scheme",
City: "Bangalore",
Salary: "500000",
Department: "IT",
},
{
Id: "7",
Name: "Chavi",
Age: "25",
Address: "C-Scheme",
City: "Noida",
Salary: "500000",
Department: "IT",
},
{
Id: "8",
Name: "Nisha",
Age: "25",
Address: "C-Scheme",
City: "Delhi",
Salary: "500000",
Department: "IT",
}
]
};
},
};
</script>
<style>
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-alpine.css";
.ag-theme-alpine {
@include ag-theme-alpine((
odd-row-background-color: #ACE
));
}
</style>现在右键单击组件文件夹并添加一个新文件并命名为“Datagrid.vue”，它会创建一个新组件。将以下代码添加到此组件。
<template>
<div class="row" style="margin-top:10px">
<div class="col-sm-12 btn btn-info">
Add Pagination and Filter in ag-Grid
</div>
</div>
<ag-grid-vue style="height: 500px;"
class="ag-theme-alpine"
:columnDefs="columnDefs"
:rowData="rowData" pagination="true" paginationPageSize="5" floatingFilter="true" >
</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 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { AgGridVue } from "ag-grid-vue3";
export default {
name:"Datagrid",
components: {
AgGridVue
},
setup() {
return {
columnDefs: [
{ headerName: "Id", field: "Id", sortable: true, filter: true },
{ headerName: "Name", field: "Name", sortable: true, filter: true },
{ headerName: "Age", field: "Age", sortable: true, filter: true },
{ headerName: "Address", field: "Address", sortable: true, filter: true },
{ headerName: "City", field: "City", sortable: true, filter: true },
{ headerName: "Salary", field: "Salary", sortable: true, filter: true },
{ headerName: "Department", field: "Department", sortable: true, filter: true }
],
rowData: [
{
Id: "100",
Name: "Sanwar",
Age: "25",
Address: "Jaipur",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "2",
Name: "Nisha",
Age: "25",
Address: "C-Scheme",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "3",
Name: "David",
Age: "25",
Address: "C-Scheme",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "4",
Name: "Sam",
Age: "25",
Address: "C-Scheme",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "5",
Name: "Jyotsna",
Age: "25",
Address: "C-Scheme",
City: "Mumbai",
Salary: "500000",
Department: "IT",
},
{
Id: "6",
Name: "Sid",
Age: "25",
Address: "C-Scheme",
City: "Bangalore",
Salary: "500000",
Department: "IT",
},
{
Id: "7",
Name: "Chavi",
Age: "25",
Address: "C-Scheme",
City: "Noida",
Salary: "500000",
Department: "IT",
},
{
Id: "8",
Name: "Nisha",
Age: "25",
Address: "C-Scheme",
City: "Delhi",
Salary: "500000",
Department: "IT",
}
]
};
},
}
</script>
<style >
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-alpine.css";
</style>现在打开 App.vue 文件并添加以下代码。
<template>
<div id="app">
<Datagrid/>
</div>
</template>
<script>
import Datagrid from './components/Datagrid.vue'
export default {
name: 'App',
components: {
Datagrid
}
}
</script>
<style>
</style>现在使用以下命令运行项目：’npm run serve’
概括
在本文中，我们学习了如何在 Vue.js 应用程序中使用 ag-grid。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
