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>