隐藏/显示 V 数据表中的多列

Question

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

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

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

  return this.headers;
}

},

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

非常感谢。

Answer 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像以前一样传到桌子上。