根据屏幕大小动态更改表格行Vuejs答案

【问题标题】：Dynamically changing table rows based on screen size Vuejs根据屏幕大小动态更改表格行Vuejs
【发布时间】：2020-07-03 17:00:48
【问题描述】：

我有一个表格，第一行有两个 <tr> 标签（我知道，但不幸的是它必须这样）：

标签一：

<tr class="abc"
    @click="expanFunc">

标签二：

<tr class="abc">

如果屏幕尺寸是大或中，我希望我的表格只显示标签一，如果我的屏幕尺寸是小或 xs，我希望我的表格只显示标签二。我需要在不刷新页面的情况下动态发生这种情况。我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

您是否尝试过在 css 中使用 @media？你可以给你想要隐藏一个类的 tr ，然后根据屏幕大小将其隐藏，可见性为：hidden;

<tr class="abc ExampleClass">

@media only screen and (max-width: 600px) {
  .ExampleClass{
    visibility: hidden;
  }
}

当屏幕尺寸为 600 像素或更小时，这将隐藏使用该类的任何内容。

【讨论】：

【解决方案2】：

你可以看看这个：vue-mq

这是 DigitalOcean 的另一个 reference。

您可以根据屏幕尺寸分配断点。在您的情况下，这将是 XS、小型、中型和大型。

我还没有测试过，但也许你可以做这样的事情（在安装插件之后）：

<tr class="abc" @click="expanFunc" :mq="['medium', 'large']">
<tr class="abc" :mq="['xs', 'small']">

【讨论】：