如何在 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’