隐藏特定标题及其在 vuetify 数据表中的对应列答案

【问题标题】：Hide a particular header and it's corresponding column in vuetify datatable隐藏特定标题及其在 vuetify 数据表中的对应列
【发布时间】：2019-03-08 14:19:34
【问题描述】：

这里列出了我们可以附加一些类，它会得到照顾。我仍然对如何使用它感到困惑。

https://github.com/vuetifyjs/vuetify/pull/1863

密码笔

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

假设我想隐藏卡路里列。那我该怎么做呢。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

如果您仍然需要可过滤列（例如使用搜索输入），您只需将 d-none（带有前导空格）添加到标题的 align 属性。

headers: [
    {
      text: 'Dessert (100g serving)',
      align: 'left',
      sortable: false,
      value: 'name',
    },
    { text: 'Category', value: 'category', align: ' d-none' }, // ' d-none' hides the column but keeps the search ability
    { text: 'Calories', value: 'calories' },
    { text: 'Fat (g)', value: 'fat' },
    { text: 'Carbs (g)', value: 'carbs' },
    { text: 'Protein (g)', value: 'protein' },
    { text: 'Iron (%)', value: 'iron' },
  ]

例如，如果我想隐藏类别列但能够通过它进行搜索。

https://codepen.io/simondepelchin/pen/JjjEmGm

编辑：请注意，当表格切换到移动行时，这仍会显示标题。

【讨论】：

对齐：'d-none'。非常感谢！！！！ Bootstrap 4 最好的方法和聪明的方法！！！
关于如何在移动设备上隐藏它的任何提示？
@alfreema 看看Vuetify's display helpers。也许试试d-none d-md-table-cell

【解决方案2】：

headers 对象可以是一个计算属性，所以你不需要 CSS 来隐藏它。让您的 computedHeaders 函数过滤您的 headers 数组。

computed: {
   computedHeaders () {
      return this.headers.filter(....Your filter logic here)  
   }
}

将您的标头绑定在您的 html 中以指向“computedHeaders”而不是标头

:headers="computedHeaders"

【讨论】：

在编辑单元格项目时，我需要进一步使用该列的值。我不确定如何处理计算属性。之后我是否仍然得到我的隐藏值进行计算。一个codepen肯定会有所帮助。谢谢
是的，您仍然可以使用计算属性访问隐藏值，原始“标题”数组不会被修改，因此您可以使用该数组进行计算。
添加了快速 codepen - codepen.io/anon/pen/jeWRvN 有更简洁的编码方式，你可能不想用按钮切换它，但你明白了！

【解决方案3】：

扩展至SimonDepelchin's answer：

给定列的标题规范中的align 属性，例如

{ text: 'some text', value: 'category', align: 'XXX' },

像这样转换为给定<td>元素的class属性

<td class="text-XXX">{{item.category}}</td>

如果XXX 以空格开头，您可以使用它为 td 单元格指定您喜欢的任何类：

{ text: 'some text', value: 'category', align: ' d-none' },

变成

<td class="text- d-none">{{item.category}}</td>

d-none 在vuetify.min.css 中定义为.d-none{display:none!important}.v-application。但是，您无需加载 vuetify.min.css 即可使用此技巧：只需将 .d-none{display:none!important} 放在 css 定义中的任何位置即可。

但是请注意，当表格响应更改为移动视图时，align 的值将被忽略，因此相应的元素不会被隐藏。

【讨论】：

【解决方案4】：

扩展对如何使 v-data-table 项的属性可过滤且不显示在表格中的贡献：

您可以简单地将其从数据表headers 字段中排除并使用过滤器函数的item 参数，而不是隐藏该列。

示例（基于提供的示例）：

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
  >
    <template v-slot:top>
      <v-text-field
        v-model="calories"
        type="number"        
      ></v-text-field>
    </template>
  </v-data-table>
</template>

export default {
  data () {
    return {
      calories: '',
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0
        },
        ...
      ],
      // Calories column removed from headers:
      headers: [
        { text: 'Dessert (100g serving)', value: 'name' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' }
      ]
    }
  },
  methods: {
    customFilter (value, search, item) {
      // Custom filter logic
      // Example: keep only items having calories up to the provided input
      const { calories } = this
      if (calories && Number(calories) && Number.isInteger(calories)) {
        return item.calories <= calories
      }
      
      return true
    }
  }
}

【讨论】：