Hide/Show V-Data-Table 中的多列

Question

我可以请求你的帮助吗，我目前正在使用 vuetifyjs 制作列 show/hide，我偶然发现了这些参考资料：

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

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

  return this.headers;
}

},

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

非常感谢。

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传递给table。