VueJS: Как скрыть некоторые столбцы таблицы данных на мобильный размер - PullRequest
Новая
       5

VueJS: Как скрыть некоторые столбцы таблицы данных на мобильный размер

0 голосов
/ 23 января 2020

Я пытаюсь скрыть некоторые столбцы таблицы данных по размеру мобильного телефона, вот код таблицы: 

<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-card-title>
        Nutrition
        <v-spacer></v-spacer>
        <v-text-field
          v-model="search"
          append-icon="search"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
      </v-card-title>
      <v-data-table
        :headers="headers"
        :items="desserts"
        :search="search"
      ></v-data-table>
    </v-card>
  </v-app>
</div>

или вы можете найти полный код здесь: https://codepen.io/simondepelchin/pen/JjjEmGm

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

Ответы [ 2 ]

0 голосов
/ 23 января 2020

Используйте адаптивные классы отображения в опции заголовков align нужных столбцов. Например, здесь Категория и Калории показаны только на lg и шире ... 

 headers: [
    {
      text: 'Dessert (100g serving)',
      align: 'left',
      sortable: false,
      value: 'name',
    },
    { text: 'Category', value: 'category', align: ' d-none d-lg-table-cell' }, 
    { text: 'Calories', value: 'calories', align: ' d-none d-lg-table-cell' },
    { text: 'Fat (g)', value: 'fat' },
    { text: 'Carbs (g)', value: 'carbs' },
    { text: 'Protein (g)', value: 'protein' },
    { text: 'Iron (%)', value: 'iron' },
  ],

Примечание: начальный пробел важен, так как опция выравнивания добавляется к другим классам, когда каждый столбец / ячейка оказаны. Также обратите внимание на использование d-lg-table-cell вместо d-block для правильного отображения таблицы.

Демонстрация: https://codeply.com/p/hMh9qLMi3T

0 голосов
/ 23 января 2020

добавить align: ' d-none d-md-block' в ваши данные заголовков. как это: 

{ text: 'Iron (%)', value: 'iron' , align: ' d-none d-md-block'}
...