[Vuejs]-Dynamically changing table rows based on screen size Vuejs

by

0👍

Have you tried using the @media in css? You could give the tr you want to hide a class and then make it hidden based off screen size with visibility: hidden;

<tr class="abc ExampleClass">

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

This will hide anything using that class when the screen size is 600px or less.

0👍

You may take a look into this: vue-mq

Here’s another reference by DigitalOcean.

You can assign breakpoints based on your screen sizes. In your case, that would be XS, small, medium, and large.

I haven’t tested this out, but maybe you can do something like this (after installing the plugin):

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

Leave a comment