Question

我正在尝试在移动设备上的ag-grid中隐藏一列。

我正在为vue.js应用程序使用ag-grid。我已经厌倦了下面的代码，但是不能正常工作。

{
headerName: "Action",
field: "action",
minWidth: 54,
suppressMovable: true,
editable: true,
hide : ( window.innerWidth < 786 ? true : false ) 
}

我希望输出隐藏在移动设备上的此列并在桌面上显示，但是输出对我来说有点奇怪。最初，当我在移动设备和台式机上加载页面时，列会相应地隐藏/显示，但在移动设备上，它还会隐藏其他一些列的标题（仅标题）。同样，当我将窗口的大小从移动设备调整为桌面时，必填栏将不会显示，并且从桌面调整为移动设备时也不会隐藏必填栏。

Answer 1

您应该使用columnApi.setColumnVisible（“ your_column”，false）。

为此，请先将columnApi保存在@ grid-ready

<template>
    <ag-grid-vue style="width: 500px; height: 500px;"
             class="ag-theme-balham"
             :columnDefs="columnDefs"
             :rowData="rowData"
             rowSelection="multiple"

             @grid-ready="onGridReady">
</template>

...

import {AgGridVue} from "ag-grid-vue";

const hideActionColumn = () => {
    if(this.columnApi) {
        this.columnApi.setColumnVisible("action", true);

        if(window.innerWidth < 786) {
            this.columnApi.setColumnVisible("action", false);
        }
    }
}

export default {
    name: 'App',
    data() {
        return {
            columnDefs: null,
            rowData: null
        }
    },
    components: {
        AgGridVue
    },
    methods: {
        onGridReady(params) {
            this.columnApi = params.columnApi;
        }
    },
    mounted() {
        // hide the column, if the initial load is in mobile view
        hideActionColumn();

        window.addEventListener('resize', hideActionColumn);
    },
    beforeDestroy() {
        window.removeEventListener('resize', hideActionColumn);
    }
}

然后您需要附加一个事件侦听器，以便可以在window.resize上调用hideActionColumn（）

window.addEventListener('resize', hideActionColumn);

此外，您还需要在组件被销毁之前删除事件侦听器。

我希望这会对您有所帮助。问候

如何在手机上隐藏农业网格列？

1 个答案: