0

如何从插件上下文更改Grid.js组件的状态？

我正在尝试为pagination.limit道具（https://gridjs.io/docs/config/pagination）实现可视化配置器：

import { BaseComponent, BaseProps, h, PluginPosition } from 'gridjs';

class LimitConfigurator extends BaseComponent {
    setLimit(limitNew) {
        // this.setState({ pagination: {limit: limitNew}});
        // this.config.pagination.limit = limitNew;
    }

    render() {
        const self = this;

        return h(
            'div',
            { class: 'limit-configurator' },
            [
                h('span', { onclick: function () { self.setLimit(10); } }, '10'),
                h('span', {}, '25'),
                h('span', {}, '50'),
            ]
        );
    }
}

它在网格的页脚下呈现类似的内容，并为原始组件中10 | 25 | 50的路径动态设置新的每页编号。pagination.limit注册码：

// somewhere in the Vue component (using gridjs-vue bridge)...

async mounted() {
    await elementReady('.grid-operator', { stopOnDomReady: false });

    const gridComponent = this.$refs.gridReference.$data.grid;

    gridComponent.plugin.add(
        {
            id: 'limitEditor',
            component: LimitConfigurator,
            position: PluginPosition.Footer,
        },
    );

    gridComponent.forceRender();
},

我在 中看到了 prop 值，this.config但不知道如何从插件中正确操作它们（目前正在学习 preact + vue 环境）。有没有“方便”的方法呢？

4

0 回答 0