在Vue使用ag-grid-vue表格的分页自定义使用el-element-ui的分页

ag-grid-vue列表设置属性:pagination="true"就能开启分页，但是ag-grid-vue列表自带的分页样式不好看，使用el-element-ui的分页既能直接使用它的样式，也能自己快速设置关于分页的size-change和current-page方法，也能设置page-size属性。
首先第一步

一、隐藏ag-grid自带的分页样式

 /* 隐藏ag-grid自带的分页样式 */
.ag-paging-panel{
  display:none;
}

接着写结构，此处使用ag-theme-balham主题，data里面定义表格的一些属性可以看我之前的博客Ag-grid在vue中使用的必要属性

二、搭建ag-grid列表结构

<div>
 <ag-grid-vue
    :selectCol="selectCol"
    :rowHeight="rowHeight"
    :headerHeight="headerHeight"
    :minColWidth="minColWidth"
    class="ag-theme-balham"
    style="height: 400px"
    @gridReady="onGridReady"
    :columnDefs="columnDefs"
    :rowData="rowData"
    cacheBlockSize="0"
    maxBlocksInCache="0"
    :animateRows="true"
    :pagination="true"
    :defaultColDef="defaultColDef"
    :context="context"
    :gridOptions="gridOptions"
  >
  </ag-grid-vue>
  <div class="my_pagination">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync=searchForm.currentPage
      :page-sizes="[20, 50, 100, 200, 300]"
      :page-size=searchForm.pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRows"
      background
      >
    </el-pagination>
  </div>
</div>

三、初始化列

四、数据渲染列表

五、设置列表的字段

在没有接口保存到后端的情况下，使用store2保存或者使用本地存储localStorage。

六、定义element-ui分页的方法

 handleSizeChange(val) {
    this.searchForm.pageSize = val;
    // 调接口
  },
  handleCurrentChange(val) {
    this.searchForm.currentPage = val;
    // 调接口
  }

六、完整代码

<template>
  <div>
    <ag-grid-vue
      :selectCol="selectCol"
      :rowHeight="rowHeight"
      :headerHeight="headerHeight"
      :minColWidth="minColWidth"
      class="ag-theme-balham"
      style="height: 400px"
      @gridReady="onGridReady"
      :columnDefs="columnDefs"
      :rowData="rowData"
      cacheBlockSize="0"
      maxBlocksInCache="0"
      :animateRows="true"
      :pagination="true"
      :defaultColDef="defaultColDef"
      :context="context"
      :gridOptions="gridOptions"
    >
    </ag-grid-vue>
    <div class="my_pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync=searchForm.currentPage
        :page-sizes="[20, 50, 100, 200, 300]"
        :page-size=searchForm.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalRows"
        background
        >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import Storage from 'store2'
export default {
  name: "agGridDemo",
  data() {
    return {
    // 请求参数
      searchForm: {
        currentPage: 1, 
        pageSize: 20,
      },
      totalRows: 0,// 列表总条数
      // 表格属性
      rowHeight: 48,
      headerHeight: 40,
      rowStyle: {
        background: "white",
      },
      minColWidth: 20,
      gridName: "myGridName",
      defaultColDef: null,
      columnDefs: null,
      gridApi: null,
      gridColumnApi: null,
      rowData: [],
      frameworkComponents: null,
      context: null,
      selectCol: {
        headerName: "",
        width: 30,
        maxWidth: 30,
      },
      gridOptions: {},
      tooltipShowDelay: null,
    };
  },
  beforeMount() {
    this.columnDefs = [
      {
        headerName: "时间",
        field: "dateStr",
      },
      {
        headerName: "销量",
        field: "sales",
      },
      {
        headerName: "订单量",
        field: "orderQuantity",
      },
      {
        headerName: "价格",
        field: "price",
      }
    ];
    this.defaultColDef = {
      valueFormatter: this.valueFormatter,
      resizable: true,
      suppressSizeToFit: true,
      editable: true,
      lockPinned: true,
      cellEditor: "agLargeTextCellEditor",
      tooltipComponent: "customTooltip",
      sortable: true
    };
    this.frameworkComponents = {};
    this.context = { componentParent: this };
    this.tooltipShowDelay = 0;
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
      this.setGridColumn(this.gridName);
      // 此处应该调接口，接口模拟接口返回的数据，渲染给表格
      var list = [
        {
          dateStr: '2020-11-11',
          sales: 10,
          orderQuantity: 20,
          price: 30,
        },
        {
          dateStr: '2020-11-12',
          sales: 11,
          orderQuantity: 22,
          price: 33,
        },
        {
          dateStr: '2020-11-13',
          sales: 10,
          orderQuantity: 20,
          price: 30,
        },
        {
          dateStr: '2020-11-14',
          sales: 11,
          orderQuantity: 22,
          price: 33,
        },
        {
          dateStr: '2020-11-15',
          sales: 10,
          orderQuantity: 20,
          price: 30,
        },
        {
          dateStr: '2020-11-16',
          sales: 11,
          orderQuantity: 22,
          price: 33,
        },
        {
          dateStr: '2020-11-17',
          sales: 10,
          orderQuantity: 20,
          price: 30,
        },
        {
          dateStr: '2020-11-18',
          sales: 11,
          orderQuantity: 22,
          price: 33,
        },
        {
          dateStr: '2020-11-19',
          sales: 10,
          orderQuantity: 20,
          price: 30,
        },
        {
          dateStr: '2020-11-20',
          sales: 11,
          orderQuantity: 22,
          price: 33,
        },
        {
          dateStr: '2020-11-21',
          sales: 10,
          orderQuantity: 20,
          price: 30,
        },
        {
          dateStr: '2020-11-22',
          sales: 11,
          orderQuantity: 22,
          price: 33,
        },
      ]
      this.rowData = list
      this.totalRows = list.length
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    },
     /* 设置列表的字段 */
    setGridColumn(gridName){
      let gridColumn = Storage.namespace('gridColumn')
      if (gridColumn.get(gridName)){
        this.gridColumnApi.setColumnState(gridColumn.get(gridName))
      }
    },
    // element-ui分页
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      // 调接口
    },
    handleCurrentChange(val) {
      this.searchForm.currentPage = val;
      // 调接口
    }
  },
};
</script>