如何在手機上隱藏農業網格列？

Question

我正在嘗試在移動設備上的ag-grid中隱藏一列。

我正在將ag-grid用於vue.js應用程序。 我已經厭倦了下面的代碼，但是不能正常工作。

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

我希望輸出隱藏在移動設備上的此列並在桌面上顯示，但是輸出對我來說有點奇怪。 最初，當我在移動設備和台式機上加載頁面時，列會相應地隱藏/顯示，但在移動設備上，它還會隱藏其他一些列的標題（僅標題）。 同樣，當我將窗口的大小從移動設備調整為桌面時，require列將不會顯示，並且從桌面大小調整為移動設備也不會隱藏必填列。

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);

同樣，您需要在組件被銷毀之前刪除事件偵聽器。

我希望這能幫到您。 問候