隐藏特定标题及其在 vuetify 数据表中的对应列 [英] 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

密码笔

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

假设我想隐藏卡路里列.那我该怎么做.

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

推荐答案

headers 对象可以是一个计算属性，所以你不需要 CSS 来隐藏它.让您的计算标题功能过滤您的标题数组.

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)  
   }
}

更改您的 html 中的标题绑定以指向 'computedHeaders' 而不是标题

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

:headers="computedHeaders"

这篇关于隐藏特定标题及其在 vuetify 数据表中的对应列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！