Ag-grid VueJs ServerRow Модель Реактивный компонент заголовка - PullRequest
0 голосов
/ 07 мая 2019

, поэтому при использовании модели «ServerRow» мы теряем возможность установить флажок «выбрать все» в заголовке, а также возможность использовать методы selectAll () и deselectAll (), включенные по умолчанию в API сетки.

Я кодировал свой собственный компонент для замены с помощью Vuetify. Единственная проблема в том, что я не могу реагировать, когда строки выбираются вручную.

Существуют ли какие-либо реактивные свойства, которые, возможно, содержат хэш, который я могу использовать в качестве ключа для обновления компонента? Эта модель ServerRow доступна только тем, кто приобрел лицензию разработчика, поэтому я не могу точно разместить здесь JsFiddle.

<template>
    <div>
        <v-checkbox class="" value :input-value="state == 'all'" :indeterminate="state == 'some'" @click.prevent.stop="onClick()"></v-checkbox>
    </div>
</template>


<script>
    import { agGridHeaderComponentMixin } from '@mixins/agGrid/agGridHeaderComponentMixin';

    export default {
        mixins: [ agGridHeaderComponentMixin ],
        data: function () {
            return {
                state: 'none',
            };
        },
        updated(){
            console.log('updated',
                this._api.getSelectedRows().length,
            );
        },
        methods: {
            refresh(params) {
                this.params = params;
            },
            onClick(){
                var tempState = this.state;

                if(tempState == 'some' || tempState == 'all'){
                    this.state = 'none';
                    this.deselectAll();
                } else if (tempState == 'none'){
                    this.state = 'all';
                    this.selectAll();
                }
            },
            selectAll(){
                this.params.api.forEachNode(node => node.setSelected(true, false));
                console.log({selected: this._api.getSelectedNodes()})
            },
            deselectAll(){
                this._api.forEachNode(node => node.setSelected(false, true));
                console.log({selected: this._api.getSelectedNodes()})
            },
            getSelectedNodes(){
                return this._api.getSelectedNodes();
            },
            getAllNodes(){
                const rowData = [];
                this._api.forEachNode(node => rowData.push(node.data));
                return rowData;
            }
        }
    };
</script>

Выше представлен текущий компонент заголовка. this._api = this.params.api.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...