问题标签 [v-data-table]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
243 浏览

javascript - 如何捕获 v-data-table 组件上的滚动事件?

有没有办法在 Vuetify frmework 的 v-data-table 组件上捕获滚动事件?

我的意思是表格具有固定高度的情况,因此表格主体会滚动。

https://codepen.io/Zurab-D/pen/yLXOyRJ

0 投票
0 回答
35 浏览

sorting - 具有可编辑列的 Vuetify 数据表 - 禁用排序

我有一个带有可编辑列的 Vuetify 数据表。

如果我正在编辑的单元格位于排序列中,则更改单元格的值会触发排序并立即光标移动到不同的表格单元格

是否可以在编辑或其他一些聪明的解决方案时禁用排序?

0 投票
0 回答
16 浏览

header - 隐藏行中的分隔符 v-data-table

有没有办法在标题中有分隔符但在行中没有?当我在标题对象上设置 divider:true 时,分隔符会显示在标题中,但也会显示在数据行中。我想只在标题中使用它。

0 投票
1 回答
34 浏览

vue.js - 如何使用 v-for 为每个表头动态插入文本搜索字段以实现多搜索功能?

为了实现多搜索功能,我们在每个带有 v-slot 的标题处添加一个搜索字段,我们直接定义标题名称。例如:

现在我的数据表有大约 50 个标题。我的想法是动态渲染。我尝试使用 v-for 但它既不呈现也不给出任何错误。下面的代码:

我在这里错过了什么?还是我走的路完全错了?

以下是完整代码:

0 投票
1 回答
79 浏览

javascript - V-data-table expand get value on arrow click

我正在使用带有可扩展行的 v-data-table。单击展开箭头时,我想获取行的值。我知道我可以在单击该行时使用 @click:row 来获取值,但是专门单击箭头并没有相同的效果。直接单击展开箭头时如何获取此值?

v-data-table 下面是相当基本的。我想在展开箭头单击时调用一个方法,该方法从该行获取项目/对象。

0 投票
1 回答
31 浏览

vue.js - 在另一个选项卡中显示工具栏 crud 表

我有一个 crud 表,也注册了一个全局组件,在这个表中我有一个用于 crud 操作的工具栏。

假设我有一个 v-tabs 组件,它在“tab 1”中包含“tab 1”和“tab 2”<br /> 我
在“tab 2”中有这个 crud 表我有这个表的详细信息,其中包含像这样的输入v-text-field 或 v-combobox…</p>

我的问题是:是否可以在“选项卡 2”中的“选项卡 1”中的 crud 表中显示收费栏?
→ 如果是,我想在两个选项卡中显示工具栏,
如何?

0 投票
0 回答
128 浏览

pagination - Vuetify v-data-table 分页:mounted() 中的 options.page 值变化

我正在使用 Nuxt 2.15.8 和 @nuxtjs/vuetify 1.12.1 (Vuetify 2)。

我有一个带有服务器端分页的 v-data-table,每一行/项目都有一个指向详细信息页面的链接。一切正常。

当用户在 v-data-table 中导航时,我在 URL 中添加页码,?page=2因此当用户从详细信息页面单击浏览器后退按钮时,我可以将 v-data-table 重置到它们所在的位置。(我对搜索条件做同样的事情,它工作得很好)。

如果我在 created() 中记录 this.options.page,我有正确的数字,但在 mount() 中它被重置为 1,我不明白为什么

对 API 的调用是从 watch on options 中触发的。

模板

脚本(如果我预设 1 或 0,它会做同样的事情......)

我尝试了很多方法来修复它(添加一个标志以防止对 API 的多次调用,在 API 调用后重置 options.page 但最终进行了两次调用......)我无法在此处列出所有这些。

我认为我可能不了解 Nuxt 和 v-data-table 的生命周期,因此对此的任何了解都会非常感激!最好是一个工作示例:*我可以为您提供帮助的任何信息,请询问。

我发现与我的问题相关的唯一主题是这个旧主题,但没有答案。

谢谢!

0 投票
1 回答
136 浏览

vue.js - @click:row 未在 v-data-table (Vuetify) 中触发

我有一个来自 vuetify 的 v-data-table,其中有两个点击事件。一个被触发(deleteBooking),另一个不是(booking_clicked)?!该按钮用于删除项目。行点击事件是向用户显示点击行的附加信息。

0 投票
2 回答
137 浏览

vue.js - 使用 v-slot:body 和 v-checkbox 行选择器

当使用带有 v-checkbox 的 v-slot:body 进行行选择时,与没有任何 v-slot:body 的 v-data-table 相比,我得到了一个意外的行为。当“items”对象改变时,所有的复选框都在 v-slot:body 中被“选中”。

我的 v-checkbox 和没有 v-slot:body 的 v-data-table 使用的那个有什么不同?有没有办法在仍然使用主体插槽的同时解决这个问题?

复制: https ://codepen.io/Straktor/pen/gOGpoqJ

0 投票
2 回答
247 浏览

javascript - Vue数据表排序不能正常工作

我有这个v-data-table

和标题:

如您所见,有一个恶魔quantity(代码中的整数),我想使用此列进行表排序。默认情况下,它根本无法正常工作。不是quantity领域,不是其他人。

我写道,这是代码中的整数列。另外,我试图在桌子sortable: false上的其他列:sort-by="['quan]" :sort-desc="true"上使用和,但它仍然不起作用。