问题标签 [v-data-table]

我有一个具有 Show-select 的 v-data-table，我想获取我选择的项目的数据，至少在 check 时提醒第一列值。我到处寻找。我找不到我的问题的答案。

js

https://codepen.io/CodingDeer/pen/QWLyaog?editors=1010

这只是我最近发现的一个例子（代码不是我的），这段代码可以检测是否所有复选框都被选中

我想为我的 v-data-table （包含书籍）构建一个自定义过滤器

• 允许通过输入多个空格分隔的搜索词来缩小搜索结果
• 将带有连字符的复合词分成单独的搜索词
• 所有搜索词都应出现在项目中，但它们可以出现在不同的列/道具中，因此搜索“tolkien hobbit”会返回一本标题为“The Hobbit”且作者为“JRR Tolkien”的书

我认为在 customFilter 函数中使用“值”将需要所有搜索词出现在同一个道具中，所以我使用了 item 代替，但是 vuetify 将完整的项目提供给过滤器函数，而不仅仅是数据的可过滤标题表，这将产生不需要的搜索结果，所以我重新初始化该项目以摆脱不需要的道具。

我的问题

• 有没有办法告诉 vuetify 只将可过滤的标题道具作为项目提供给自定义过滤器？
• 如果没有，有没有比重新初始化更好的方法来摆脱不需要的道具？（使用扩展运算符进行解构也可以，但会更长，并且 eslint 会唠叨未使用的变量）
• 有没有办法用“价值”而不是“项目”来实现我的要求？（我不明白如何）

根据v-data-table 中自定义过滤器的 Vuetify 文档，可以通过在标题项上提供过滤器属性来自定义对特定表列的过滤。

在我的应用程序中，我想使用它来自定义单个列的过滤。对于所有其他列，我想保留默认的字符串匹配行为。

作为一个起点（参见 codepen），我提供了一个自定义过滤器，它只返回true：

和

我现在已经预料到，无论我输入什么搜索字符串，car列上的过滤器都会匹配所有行，因此会显示整个表格。

我观察到的是，该表仍被过滤，但仅按country列。

相反，当我将过滤器更改为返回false时，会显示一个空表。然后我会预料到，该表仅按country列过滤。

标题过滤器是如何应用的？或者，更准确地说：

对于每一行，如何组合各个列过滤器的结果以产生整行的过滤器结果？

所以，我在数据表中有动态变化的列。例如，S1、S2、S3 值列。而且我想在单元格中放置复选框，但不是全部，因为我有名称值。我怎样才能动态地制作<template v-slot:item.S1="item">和<template v-slot:item.S2="item">...

提前感谢您的回复！

Is there a way to sort a v-data-table by the selection column? I would like to multisort my v-data-table. First by selection, so the selected ones are always on top and second by name. So far I got this:

目标：

我计划v-data-table在每列的基础上将自定义搜索添加到我的过滤器中。例如，如果我有桌子

我想v-text-field在NameandAge标题中添加一个以启用对这两列的自定义过滤。

当前设置：

这可以通过添加模板来轻松实现，v-data-table例如

问题：

这个解决方案确实有效，但它看起来一点也不漂亮
这是它在codepen 中的样子 正如人们可以清楚地看到的那样，字体比默认标题大，并且“排序箭头”向下移动了一行。

现在我正在寻找一种解决方案，如何使自定义v-text-field标题看起来像其他默认标题。
我的假设是我必须使用 css 进行样式设置，但我不确定。
任何指向正确方向的指针将不胜感激！☺</p>

我正在尝试自定义我v-data-table喜欢的所有标题

我在文档中看到如何只为这样的 ONE 标头执行此操作：

但我想自定义所有标题，但我不知道如何做到这一点。我的标题也是动态的。

我有一个带有搜索表单的页面，我使用 vuetify 的数据表作为搜索结果，可以按列排序。

如果我单击表中的某个项目，我将被转发到该项目的编辑页面。然后，如果我单击后退按钮 (this.$route.go(-1)) 所有搜索词，搜索结果和排序都消失了，我必须再次进行相同的搜索。

那么问题来了，如何在数据表中保留所有的结果和排序选择呢？

我想我可以将 localStorage 与搜索表单输入值一起使用？

我想要的是能够默认在 v-select 组件中选择一个选项。这里

根据文档，默认情况下使用 v-model 属性进行选择，但我使用该属性能够执行过滤（v-model="caloriesFilterValue"）

Vuetify v2 Vuejs v.2.6

组件代码

导入的数据 import tableData from './sampleDataTable';

我正在使用 vuetify，我需要让服务器端控制的数据表运行。现在我在这里的文档中看到了这段代码

除此之外，我正在努力了解这是如何工作的，我对这段代码感到困惑。

一个没有键的对象被覆盖，this.options 但this.options无论如何都是空的，你可以在文档中看到。