vue项目中使用ag-grid

我这个项目中使用原因：

支持大数据量数据，滑动页面不会有白屏现象
可对当前列表中数据进行过滤

安装依赖

ag-grid-vue
ag-grid-community 我这里使用的社区版
@ag-grid-community/locale 中文配置依赖

main.js

import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-balham.css"; //主题样式（除了balham，还有quartz、material、alpine）

vue.config.js

module: {rules: [{test: /\.mjs$/,include: /node_modules/,type: 'javascript/auto'}]},

关键代码

template中（我这里没用自带的分页器，使用的是基于el-pagination封装的pagination组件）

<template>
<div class="app-table"><AgGridVue:style="styleClass"class="ag-theme-balham"v-loading="loading":columnDefs="columns":rowData="tableData":defaultColDef="defaultColDef":gridOptions="gridOptions"@grid-ready="onGridReady"/><pagination:total="total":page.sync="queryParams.pageNum":page-sizes="[100, 200, 500, 1000, 20000]":limit.sync="queryParams.pageSize":pager-count="queryParams.pagerCount ? queryParams.pagerCount : 7"@pagination="getList"/>
</div>
</template>

script中

<script>
import { AgGridVue } from "ag-grid-vue";
import { AG_GRID_LOCALE_CN } from "@ag-grid-community/locale"; // 汉化包
import Setter from "./Setter.vue"; //自定义组件-操作列按钮
export default {name: "demo",components: {AgGridVue,Setter,},computed: {styleClass() {return `width: 100%; height: ${this.tableH}`;},},data(){return {queryParams: {pageNum: 1,pageSize: 100,},total: 0, // 数据量/*** 列属性* headerName 列名* field 列匹配的字段* filter 是否可过滤* sortable 是否可排序* tooltipField 鼠标悬浮是单元格内容的tooltip提示【未验证】* checkboxSelection: true, //该列前带CheckBox复选框【未验证】* hide 配置是否显示* wrapText: true,//单元格文字自动换行** autoHeight: true,//单元格根据内容自动调整高度* suppressMovable: true, //禁止拖拽列*/columns: [{headerName: "", //选择列头部显示的文字，可以为空checkboxSelection: true, //设置为ture显示为复选框headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用pinned: "left", //固定再左边width: 50, //列的宽度sortable: false,resizable: false,filter: false,suppressMovable: true,},{headerName: "序号", // 必填，显示在表头的文本width: 70, // 宽度cellRenderer: function (params) {return parseInt(params.node.id) + 1;},cellStyle: {// 设置本栏的CSS样式"text-align": "left","text-indent": "10px",},pinned: "left",suppressSizeToFit: true,suppressSorting: true,suppressMenu: true,sortable: false,filter: false,suppressMovable: true,},{headerName: "分公司",field: "comName",tooltipField: "comName",width: 100,pinned: "left",tooltipValueGetter: (p) => p.value,},{headerName: "小区名",field: "areaName",tooltipField: "areaName",width: 100,pinned: "left",filter: true,wrapText: true,autoHeight: true,tooltipValueGetter: (p) => p.value,},{headerName: "来源",field: "equipManagePlatform",dictName: "source_type",valueFormatter: this.sexFormatter, // 值去匹配字典项width: 140,filter: true,},{headerName: "操作",field: "action",filter: false,sortable: false,pinned: "right",width: 320,cellRenderer: "Setter",cellRendererParams: {editFun: this.editFun,delFun: this.delFun,},},],tableData: [],defaultColDef: {// sortable: true, //可排序// resizable: true, //可拖动改变列宽filter: true, //可过滤筛选// editable: true, //是否可编辑单元格enablePivot: true,},gridApi: null,gridColumnApi: null,gridOptions: {id: "agTableid",tooltipShowDelay: 1000, // tooltip 只有添加 tooltipShowDelay 才会显示localeText: AG_GRID_LOCALE_CN,rowSelection: "multiple", //设置多好可选rowMultiSelectWithClick: true, //点击行可取消选择// suppressRowDeselection: false,toolPanel: "side",sideBar: true,},gridApi: null,gridColumnApi: null,	}},methods: {getList() {this.loading = true;const data = {...this.queryParams,};listApi(data).then((res) => {this.loading = false;this.tableData = res.rows;this.total = res.total;}).finally(() => {this.$refs.baseTable.toggleSelection();});},editFun(){},delFun(){},// 匹配字典项(可提取到utils中封装为公共方法)sexFormatter(item) {let dictList = [];let foundItem = {};let all_dict_data = localStorage.getItem("all_dict");const dicts = all_dict_data ? JSON.parse(all_dict_data) : [];dictList = dicts.filter((dictItem) => dictItem.dictType == item?.colDef?.dictName);foundItem = dictList.find((curItem) => curItem.dictValue == item.value);return foundItem ? foundItem.dictLabel : item.value ? item.value : "-";},onGridReady(params) {this.gridApi = params.api;this.gridColumnApi = params.columnApi;},//获取选中行数据getSelect() {if (this.gridApi) {let rows = this.gridApi.getSelectedRows();this.selectList = JSON.parse(JSON.stringify(rows));}},}
}
</script>

setter组件

<template><div class="setter"><el-button size="mini" type="text" @click="editFun">编辑</el-button><el-button size="mini" type="text" @click="delFun">删除</el-button></div>
</template><script>
export default {name: "Setter",methods: {editFun() {this.params.editFun(this.params.data);},delFun() {this.params.delFun(this.params.data);},},
};
</script>