Hide a particular header and it's corresponding column in vuetify datatable

问题

it's listed here that we can attach some class to it and it will be taken care of .i'm still confused on how to use this.

https://github.com/vuetifyjs/vuetify/pull/1863

The codepen

 https://codepen.io/anon/pen/OBMZgB

suppose i want to hide the calories column. then how should i do it.

回答1:

The headers object can be a computed property, so you don't need CSS to hide it. Have your computedHeaders function filter your headers array.

computed: {
   computedHeaders () {
      return this.headers.filter(....Your filter logic here)  
   }
}

Change your headers bind in your html to point to 'computedHeaders' instead of headers

:headers="computedHeaders"

回答2:

In case you still need the column to be filterable (with a search input for instance) you can simply add d-none (with a leading space) to the align property of the header.

headers: [
    {
      text: 'Dessert (100g serving)',
      align: 'left',
      sortable: false,
      value: 'name',
    },
    { text: 'Category', value: 'category', align: ' d-none' }, // ' d-none' hides the column but keeps the search ability
    { text: 'Calories', value: 'calories' },
    { text: 'Fat (g)', value: 'fat' },
    { text: 'Carbs (g)', value: 'carbs' },
    { text: 'Protein (g)', value: 'protein' },
    { text: 'Iron (%)', value: 'iron' },
  ]

Example, if I want to hide the category column but be able to search through it.

https://codepen.io/simondepelchin/pen/JjjEmGm

Edit: Note that this will still show the header when the table switched to mobile rows.

回答3:

Expanding on SimonDepelchin's answer:

The align property in the header specification of a given column, e.g.

{ text: 'some text', value: 'category', align: 'XXX' },

is converted into a class property of the given <td> element like this

<td class="text-XXX">{{item.category}}</td>

If XXX begins with a space, you can use this to give the td cell any class you like:

{ text: 'some text', value: 'category', align: ' d-none' },

becomes

<td class="text- d-none">{{item.category}}</td>

d-none is defined in vuetify.min.css as .d-none{display:none!important}.v-application. However, you do not need to load vuetify.min.css for this trick to work: just put .d-none{display:none!important} anywhere in your css definition.

Note, however, that when the table responsively changes to mobile view, the value of align is ignored, and thus the corresponding element is not hidden.

来源：https://stackoverflow.com/questions/52625562/hide-a-particular-header-and-its-corresponding-column-in-vuetify-datatable

标签

Vue.js

vuetify.js