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>
ag-grid分为：
AG Grid Community 社区版（免费的支持的功能相对少）
AG Grid Enterprise 企业版（会支持像侧边过滤工具栏、列配置栏等）
Enterprise Bundle（在企业版基础上支持 AG Charts）
详细功能英文文档
ag-grid-community社区版中文文档
参考文章