Question

在所有ag-grid-vue示例中，行的数据是在createRowData（）的组件方法中生成的，这很简单但不现实。

我想看一个例子，其中行数据从父Vue实例提供给ag-grid vue组件。

如果有这样的信息，请告诉我。

Answer 1

我通过使用Veux找到了一种方法。这是一个例子。

器件的应用。

let gridRows = {
  state: {
    rowData: []
  },
  mutations: {
    push(state, rows) {
      while( 0 < rows.length ){
        state.rowData.unshift(rows.pop());
      }
    },
  getters: {
    rowData: state => {
      let rows = state.rowData;
      return state.rowData;
    }
  }
};
let store = new Vuex.Store(gridRows);
let app01 = new Vue({
  el: '#app',
  store,
  render: h => h(DynamicComponentExample)
});

let rowData = [];
for (var i=0; i < 15; i++) {
  rowData.unshift({
    row: "Row " + i,
    value: i,
    currency: i + Number(Math.random().toFixed(2))
  });
}

store.commit('push', rowData);

组件（对DynamicComponentExample.vue的修改）

  data () {
    return {
      gridOptions: null,
      columnDefs: null
      //rowData: null
    }
  },
  computed: {
    rowData(){
      return this.$store.getters['rowData'];
    }
  },
  beforeMount() {
    ...
    //this.createRowData();
    this.initColumnDefs();
  },

将行数据提供给ag-grid vue组件

1 个答案: