如何在移动设备上隐藏 ag-grid 列？答案

【问题标题】：How to hide ag-grid column on mobile?如何在移动设备上隐藏 ag-grid 列？
【发布时间】：2020-01-06 06:23:31
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript vue.js ag-grid

【解决方案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);

你还需要在你的组件被销毁之前移除事件监听器。

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

【讨论】：