Динамическое изменение строк таблицы в зависимости от размера экрана Vuejs

Question

У меня есть таблица с двумя <tr> тегами в качестве первой строки (я знаю, но, к сожалению, так и должно быть):

тег один:

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

тег два :

<tr class="abc">

Я хочу, чтобы моя таблица отображала только один тег, если размер экрана большой или средний, и два, если мой размер экрана маленький или xs. Мне нужно, чтобы это происходило динамически, без обновления страницы. Как мне этого добиться?

Answer 1

Вы пытались использовать @media в css? Вы можете указать, какой класс вы хотите скрыть, а затем сделать его скрытым в зависимости от размера экрана с видимостью: hidden;

<tr class="abc ExampleClass">

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

Это позволит скрыть все, что используется этим классом, если размер экрана составляет 600 пикселей или менее.