隐藏特定标题及其在 vuetify 数据表中的对应列

Question

它列在这里，我们可以将一些类附加到它上，它会被处理。我仍然对如何使用它感到困惑。

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

代码笔

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

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

原文由 Rohit Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

headers 对象可以是计算属性，因此您不需要 CSS 来隐藏它。让您的 computedHeaders 函数过滤您的标题数组。

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

将 html 中的标头绑定更改为指向“computedHeaders”而不是标头

:headers="computedHeaders"

原文由 jakhicks 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您仍然需要该列可过滤（例如使用搜索输入），您只需将 d-none （带前导空格）添加到标题的 align 属性。

 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' },
  ]

例如，如果我想隐藏类别列但能够搜索它。

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

编辑：请注意，当表格切换到移动行时，这仍会显示标题。

原文由 SimonDepelchin 发布，翻译遵循 CC BY-SA 4.0 许可协议