Estoy trabajando con AG grid en vue. Tengo un requisito donde tengo dos casillas de verificación representadas usando un cellRendererFramework. No puedo encontrar una manera de recopilar los valores de las casillas de verificación de las definiciones de fila. En ag-grid, necesito seleccionar filas en función de las filas que se marcan.
Componente hijo:
<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>Definición de columna de cuadrícula agrícola de componente principal:
{ 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"}, },Defina el controlador de clics en el componente principal y páselo al elemento secundario como accesorio. El componente secundario solo necesitará llamar al accesorio, el componente principal realizará un seguimiento de los estados marcados y representará la cuadrícula en consecuencia. He aquí un ejemplo muy simple y artificial:
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>Dejando de lado un tema menor, probablemente debería usar @cambiar en lugar de @haga clic aquí para las casillas de verificación.