时间戳

首页 > 解决方案 > 如果表太大，隐藏一些列

javascript - 如果表太大，隐藏一些列

问题描述

我是反应和网络应用程序的初学者，如果有任何不清楚的地方，请告诉我。

我有下表：

<div>
<table id="mytableid" className="some classes">
    <thead>
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Phone Number</th>
        <th>Age</th>
        <th>Sex</th>
        <th>Blood Type</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>John Doe</td>
        <td>Some place somewhere</td>
        <td>093-1252-4879</td>
        <td>51</td>
        <td>Male</td>
        <td>AB</td>
    </tr>
    </tbody>
</table>
</div>

假设如果表格太大而无法放入 div，我想隐藏地址和血型。

我正在考虑这样做的方式是检查 div 的大小和 componentDidMount 中的表格，如果表格的大小大于 div，那么我会将这两列的样式设置为 display:none。

我为子菜单转换做了类似的事情，我将更改 componentDidMount 上的组件集以获取高度，然后通过更改状态将可见性隐藏。我没有注意到任何缓慢，我也看不到子菜单实际上是可见的（在 chrome 上）

我看到有些人正在做一些事情，比如如果屏幕太小，则不显示第 n 列，使用纯 CSS 很好。但在我的情况下，我不确定我是否可以做类似的事情，因为我希望我的组件的用户指定要隐藏哪些列。

我的问题是，对于 webapp 开发人员来说，显示组件的常用方法是检查 componentDidMount 上的结果，然后改变事物的外观还是有不同的模式？

标签： javascriptreactjs

解决方案

我见过的一种模式是，在这种情况下按需删除项目，即用户可以选择查看哪些列以及隐藏哪些列。请参阅开源的这个动态列示例。 http://uikernel.io/examples/dynamic-columns/

推荐阅读