在 V-Data-Table 中隐藏/显示多列答案

【问题标题】：Hide/Show Multiple Column in V-Data-Table在 V-Data-Table 中隐藏/显示多列
【发布时间】：2020-01-07 10:57:42
【问题描述】：

我可以请求您的帮助吗，我目前正在使用 vuetifyjs 使列显示/隐藏，我偶然发现了这些参考：

computedHeaders () {
  if(this.hideCalories){
    return this.headers.filter(header => header.text !== "Calories")
  }

  return this.headers;
}

我的问题是它只能隐藏 1 个标题/列。你能帮我让它隐藏多个标题吗？我想实现这样的输出：

非常感谢。

【问题讨论】：

你想隐藏脂肪和碳水化合物的标题和它们的列吗？
哪些列需要隐藏？您只想删除特定列或全部删除，点击隐藏卡路里？
@BoussadjraBrahim 如果不清楚，我很抱歉，我已经用图片编辑了我的问题/帖子。希望这会使它更清楚。谢谢你们
@Sam 很抱歉，如果不清楚，我已经用图片编辑了我的问题/帖子。希望这会使它更清楚。谢谢你们
截图与codepen sn-p不对应

标签： javascript vue.js frameworks vuetify.js

【解决方案1】：

headers 属性可以计算

  computed: {
    headers() {
      let headers = [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        }
      ]

      if (!this.hideCalories) {
        headers.push({ text: 'Calories', value: 'calories' })
      }
      if (!this.hideFat) {
        headers.push({ text: 'Fat (g)', value: 'fat' })
      }
      // ...

      headers.push({ text: 'Carbs (g)', value: 'carbs' })
      headers.push({ text: 'Protein (g)', value: 'protein' })
      headers.push({ text: 'Actions', value: 'name', sortable: false })

      return headers
    }
  }

然后像以前一样将headers 传递给表。

【讨论】：