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

Question

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

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

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

  return this.headers;
}

},

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

非常感谢。

标签： javascriptvue.jsframeworksvuetify.js

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给表。