Question

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

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

codepen

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

假设我要隐藏卡路里列。那我该怎么办。

Answer 1

如果您仍然需要该列可过滤（例如，使用搜索输入），则可以简单地将const IndexPage = () => ( <Layout> <Router> <div> <Switch> <Route exact path="/users" component={withRouter(User)}> <MainComponentWrapper url="http://localhost:5000/user"> <User /> </MainComponentWrapper> </Route> </Switch> <Route path="/users/:cn" component={withRouter(roleWrapper)} /> </div> </Router> </Layout> )（前导空格）添加到标题的d-none属性中。

align

例如，如果我想隐藏类别列，但能够在其中进行搜索。

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

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

Answer 2

headers对象可以是计算属性，因此不需要CSS即可将其隐藏。让您的computeHeaders函数过滤您的headers数组。

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

}

更改html中的标头绑定，使其指向“ computedHeaders”而不是标头

:headers="computedHeaders"

Answer 3

展开SimonDepelchin's answer：

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

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

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

<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的值将被忽略，因此相应的元素不会被隐藏。

Answer 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
    }
  }
}

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

4 个答案: