vue.js 未使用值ag-grid分配行ID

sd2nnvve 于 2023-02-05 发布在 Vue.js

关注(0)|答案(1)|浏览(121)

我尝试使用用户定义的行ID来防止重新呈现，而不是Vue ag-grid文档中描述的应用程序分配的ID。但是，唯一的行ID未分配给行，未调用回调getRowId，它将行ID添加为0、1、2......。根据文档，不清楚在哪个时间点调用回调函数来分配用户提供的行ID。
我用“vue”：“^2.6.11”和“@ag-grid-community/vue”：“^26.1.0”
型号

<template>
  <div>
      <template>
        <ag-grid-vue
          style="height: calc(100vh - 148px)"
          class="ag-theme-balham"
          :columnDefs="columnDefs"
          @grid-ready="onGridReady"
          :rowData="rowData"
          :getRowId="getRowId"
        ></ag-grid-vue>
      </template>
  </div>
</template>

脚本

<script>
export default {
  name: "My-Component",
  data() {
    return {
      columnDefs: [
        { headerName: "Row ID", valueGetter: "node.id" },
        { field: "id" },
        { field: "make" },
        { field: "model" },
        { field: "price" },
      ],
      gridApi: null,
      columnApi: null,

      rowData: null,
      getRowId: null,
    };
  },
  created() {
    this.rowData = [
      { id: "c1", make: "Lima", model: "Celica", price: 35000 },
      { id: "c2", make: "Ford", model: "Mondeo", price: 32000 },
      { id: "c8", make: "Porsche", model: "Boxster", price: 72000 },
      { id: "c4", make: "BMW", model: "M50", price: 60000 },
      { id: "c14", make: "Aston Martin", model: "DBX", price: 190000 },
    ];
    this.getRowId = (params) => {
      return params?.data.id;
    };
  },
};
</script>

vue.js

来源：https://stackoverflow.com/questions/75332653/row-ids-not-assigned-with-vue-ag-grid

1条答案

按热度按时间

uubf1zoe1#

我想你没有把ag-drid文档看清楚。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <ag-grid-vue
    style="height: calc(100vh - 148px)"
    class="ag-theme-balham"
    :columnDefs="columnDefs"
    @onGridReady="onGridReady"
    :rowData="rowData"
    :getRowId="getId"
  ></ag-grid-vue>
</template>
<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue";

export default {
  name: "App",
  data() {
    return {
      columnDefs: [
        { headerName: "Row ID", valueGetter: "node.id" },
        { field: "make" },
        { field: "model" },
        { field: "price" },
      ],
      gridApi: null,
      columnApi: null,

      rowData: null,
      getRowId: null,
      getId: (params) => {
        return params.data.id;
      },
    };
  },
  components: {
    AgGridVue,
  },
  created() {
    this.rowData = [
      { id: "c1", make: "Lima", model: "Celica", price: 35000 },
      { id: "c2", make: "Ford", model: "Mondeo", price: 32000 },
      { id: "c8", make: "Porsche", model: "Boxster", price: 72000 },
      { id: "c4", make: "BMW", model: "M50", price: 60000 },
      { id: "c14", make: "Aston Martin", model: "DBX", price: 190000 },
    ];
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
    },
  },
};
</script>

enter image description here

赞(0）回复(0）举报 2023-02-05

我来回答

vue.js 未使用值ag-grid分配行ID

1条答案

相关问题

热门标签

最新问答