隐藏/显示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传递到表中。