标签: ag-grid-vue

我在 Ag-Grid 相关代码之外更新数据。我有一个变量 ，this.works它存储我的投资组合管理器项目的所有用户“投资组合”。我this.loadMore()从服务器加载了更多数据（我无权访问，这就是我从外部加载数据的原因）。

我正在采用“无限”行模型来实现无限滚动。我开始使用数据源是因为我也想使用排序和过滤。

问题是，当我更新数据源时，滚动会重置到顶部。这是非常烦人的行为。

使用 Ag-Grid 社区和 Vue.js。

GridOptions（在 beforeMount() 中设置）

  this.gridOptions = {
    suppressScrollOnNewData: true,
    rowSelection: 'single',
    rowModelType: 'infinite',
    deltaRowDataMode: true,
    defaultColDef: {
      sortable: false,
      resizable: true
    },
    columnTypes: {
      'imageColumn': {
        width: 150,
        sortable: false,
        autoHeight: true,
        cellRendererFramework: AgGridImageFormatter
      },
      'priceColumn': {
        cellRendererFramework: AgGridPriceFormatter
      }
    }
  };

方法：

({
  methods: {
    onBodyScroll: function(event) {
      var lastDisplayedWork, ref, worksCount;
      worksCount = this.works.length;
      lastDisplayedWork = (ref = this.gridOptions.api) != null ? ref.getLastDisplayedRow() : void …

我已经在我的项目上实现了，ag-grid-vue现在我在其中一列上有一个单独的组件，基本上是Actions，现在用户可以根据选择编辑视图或删除，现在编辑和删除它工作得很好，问题是当我删除记录时，我希望通过从 Api 获取更新的数据来重新呈现表格，为此我需要从 CellRenderer 组件调用父级中的某些方法，让我向您展示代码

超文本标记语言

<ag-grid-vue
        ref="agGridTable"
        :components="components"
        :gridOptions="gridOptions"
        class="ag-theme-material w-100 my-4 ag-grid-table"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :rowData="accounts"
        rowSelection="multiple"
        colResizeDefault="shift"
        :animateRows="true"
        :floatingFilter="true"
        :pagination="true"
        :paginationPageSize="paginationPageSize"
        :suppressPaginationPanel="true"
        :enableRtl="$vs.rtl">
      </ag-grid-vue>

JS

import CellRendererActions from "./CellRendererActions.vue"

  components: {
    AgGridVue,
    vSelect,
    CellRendererActions,
  },

columnDefs: [
{
          headerName: 'Account ID',
          field: '0',
          filter: true,
          width: 225,
          pinned: 'left'
        },{
          headerName: 'Account Name',
          field: '1',
          width: 250,
          filter: true,
        },
         {
          headerName: 'Upcoming Renewal Date',
          field: '2',
          filter: true,
          width: 250,
        }, …

我正在尝试集成ag-grid到我现有的 vue.js 项目中。该表未正确呈现。我按照 ag-grid Here网站上的教程进行操作。

<template>
  <v-container>
    <v-row>
      <v-col cols="12" sm="3"></v-col>
      <v-col cols="12" sm="6">
        <ag-grid-vue
          class="ag-theme-alpine"
          :columnDefs="columnDefs"
          :rowData="rowData"
          :modules="modules"
        >
        </ag-grid-vue>
      </v-col>
      <v-col cols="12" sm="3"></v-col>
    </v-row>
  </v-container>
</template>
<script>
import { AgGridVue } from "@ag-grid-community/vue";
import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
export default {
  name: "VueGridTest",
  data() {
    return {
      columnDefs: null,
      rowData: null,
      modules: [ClientSideRowModelModule],
    };
  },
  components: {
    AgGridVue,
  },
  beforeMount() {
    this.columnDefs = [
      { headerName: "Make", field: "make" },
      { headerName: "Model", …