Vue.js中如何获取ag-grid服务端行模型的总行数？

有两种简单方式可以让你获取服务端返回的总行数并更新到组件的totalRows中：

方法一：将数据源创建函数移至组件内部 #

直接把createServerSideDatasource放到组件的methods中，这样函数内部就能通过组件实例访问data里的totalRows：

<template>
    <p>{{ totalRows }}</p>
    <ag-grid
        rowModelType="serverSide"
        ...
    >
    </ag-grid>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue3'
import 'ag-grid-enterprise'
import 'ag-grid-community/styles/ag-grid.css'

export default {
    name: 'list',
    components: {
        AgGridVue
    },  
    data() {
        return {
            gridApi: null,
            totalRows: 0,
        }
    },
    
    methods: { // 注意这里是`methods: { ... }`而非`methods()`
        onGridReady(params) {
            this.gridApi = params.api
            this.gridApi.setGridOption("serverSideDatasource", this.createServerSideDatasource())
        },
        createServerSideDatasource() {
            const vm = this // 保存组件实例，因为getRows回调的this不指向组件
            return {
                getRows: function(params) {
                    let sortColumn = null
                    let sortDirection = null
                    if (params.request.sortModel.length > 0) {
                        sortColumn = params.request.sortModel[0].colId
                        sortDirection = params.request.sortModel[0].sort
                    }

                    User.list(params.request.startRow, params.request.endRow, sortColumn, sortDirection, window.searchText).then((response) => {
                        if (response.data.success) {
                        
                            params.success({
                                rowData: response.data.rows,
                                rowCount: response.data.lastRow,
                            })

                            vm.totalRows = response.data.lastRow // 直接更新组件的totalRows
                            
                        }
                        else {
                            params.fail()
                        }
                    })
                },
            }
        }
    },
}
</script>

方法二：给外部函数传递组件实例 #

如果想保留createServerSideDatasource作为外部函数，只需把组件实例作为参数传入，就能通过实例修改totalRows：

<template>
    <p>{{ totalRows }}</p>
    <ag-grid
        rowModelType="serverSide"
        ...
    >
    </ag-grid>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue3'
import 'ag-grid-enterprise'
import 'ag-grid-community/styles/ag-grid.css'

export default {
    name: 'list',
    components: {
        AgGridVue
    },  
    data() {
        return {
            gridApi: null,
            totalRows: 0,
        }
    },
    
    methods: {
        onGridReady(params) {
            this.gridApi = params.api
            // 将当前组件实例传给外部函数
            this.gridApi.setGridOption("serverSideDatasource", createServerSideDatasource(this))
        }
    },
}

// 接收组件实例作为参数
function createServerSideDatasource(vm) {
  return {
    getRows: function(params) {
      let sortColumn = null
      let sortDirection = null
      if (params.request.sortModel.length > 0) {
        sortColumn = params.request.sortModel[0].colId
        sortDirection = params.request.sortModel[0].sort
      }

      User.list(params.request.startRow, params.request.endRow, sortColumn, sortDirection, window.searchText).then((response) => {
        if (response.data.success) {
        
          params.success({
            rowData: response.data.rows,
            rowCount: response.data.lastRow,
          })

          vm.totalRows = response.data.lastRow // 通过传入的实例更新totalRows
          
        }
        else {
          params.fail()
        }
      })
    },
  }
}
</script>

两种方法都能实现将服务端返回的总行数同步到组件的totalRows中，页面上的{{ totalRows }}会自动更新显示。

内容的提问来源于stack exchange，提问作者Liiisey