如何将数组列表传回ag-grid（Vue）中的父组件

Question

我正在 vue 中使用 AG 网格。我有一个要求，我有两个使用 cellRendererFramework 呈现的复选框。我无法找到一种方法来从行定义中收集复选框值。在 ag-grid 中，我需要根据检查的行 select 行。

子组件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<template>
<input type="checkbox" :id="inputId" :name=name @click ="clickHandler($event)" />
</template>
<script>
  import Vue from 'vue';
  export default Vue.extend({
    name: 'CheckBoxRenderer',

    data: function() {
      return {
        id: '',
        name: '',
        inputId: '',
        rx1List: [],
        rx2List: [],
      };
    },
    beforeMount() {
      this.id = this.params.data.id;
      this.name = 'rx' + this.id;
      this.inputId = this.params.column.colId + '_' + this.id; // if colId(headerName) ="rx1", and id is 2, inputId = rx1_2
    },
    methods: {
      clickHandler(e) {
        //console.log(e.target.checked, this.params.column.colId); //  to get Header name use colId property
        var group = document.querySelectorAll(`input[name="${this.name}"]`);
        // console.log(group.length);

        if (e.target.checked) {
          for (var i = 0; i < group.length; i++) {
            //console.log(group[i].checked);
            group[i].checked = false;
          }

          e.target.checked = true;
          if (this.params.column.colId === 'rx1') {
            this.rx1List.push(this.id);
          }
          console.log(this.rx1List);
        } else {
          e.target.checked = false;
        }

      }
    }
  });
</script>
<style scoped></style>

父组件ag网格列定义：

 {
                field: "rx1",
                headerName: "Rx1",
                cellRendererFramework: "checkBoxRenderer",
                valueSetter: function (param) {
                    var id = "rx1_" + param.data.id;
                    alert("if check box checked?: ", document.querySelector(id).checked);
                    param.data.rx2 = document.querySelector(id).checked;
                    console.log("Rx2: ", param.data.rx2);
                    return param.data.rx2;
                },
                flex: 1,
                maxWidth: 80,
                cellStyle: { textAlign: "center"},
                
            },

Answer 1

在父组件中定义点击处理程序并将其作为道具传递给子组件。子组件只需要调用 prop，父组件将跟踪选中的状态并相应地渲染网格。这是一个非常简单和人为的例子：

Vue.config.productionTip = false;

const Child = {
  name: 'Child',
  props: ['onCheck'],
  methods: {
    handleCheck(e) {
      console.log(`${e.target.checked ? 'Checked' : 'Unchecked'}, let's call our onCheck prop`);
      this.onCheck(e);
    }
  },
  template: `<div><input type="checkbox" id="checkbox1" @change="handleCheck($event)" /></div>`,
}

const Parent = {
  name: 'Parent',
  data() {
    return {
      state: false,
    };
  },
  methods: {
    handleCheck(e) {
      console.log("Got a click event from child!");
      this.state = e.target.checked;
    }
  },
  components: { Child },
  props: [],
  template: '<div><Child :onCheck="handleCheck" /><div>state: {{ state }}</div></div>',
};

const App = new Vue({
  el: '#root',
  components: { Parent },
  template: '<Parent />',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"></div>

除此之外，您可能应该使用@change 而不是@click here for checkboxes。

如何将数组列表传回ag-grid（Vue）中的父组件

How to pass back an array list back to parent component in ag-grid(Vue)

javascript

vue.js

ag-grid-vue