问题标签 [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.
javascript - 如何捕获 v-data-table 组件上的滚动事件?
有没有办法在 Vuetify frmework 的 v-data-table 组件上捕获滚动事件?
我的意思是表格具有固定高度的情况,因此表格主体会滚动。
sorting - 具有可编辑列的 Vuetify 数据表 - 禁用排序
我有一个带有可编辑列的 Vuetify 数据表。
如果我正在编辑的单元格位于排序列中,则更改单元格的值会触发排序并立即将光标移动到不同的表格单元格。
是否可以在编辑或其他一些聪明的解决方案时禁用排序?
header - 隐藏行中的分隔符 v-data-table
有没有办法在标题中有分隔符但在行中没有?当我在标题对象上设置 divider:true 时,分隔符会显示在标题中,但也会显示在数据行中。我想只在标题中使用它。
vue.js - 如何使用 v-for 为每个表头动态插入文本搜索字段以实现多搜索功能?
为了实现多搜索功能,我们在每个带有 v-slot 的标题处添加一个搜索字段,我们直接定义标题名称。例如:
现在我的数据表有大约 50 个标题。我的想法是动态渲染。我尝试使用 v-for 但它既不呈现也不给出任何错误。下面的代码:
我在这里错过了什么?还是我走的路完全错了?
以下是完整代码:
javascript - V-data-table expand get value on arrow click
我正在使用带有可扩展行的 v-data-table。单击展开箭头时,我想获取行的值。我知道我可以在单击该行时使用 @click:row 来获取值,但是专门单击箭头并没有相同的效果。直接单击展开箭头时如何获取此值?
v-data-table 下面是相当基本的。我想在展开箭头单击时调用一个方法,该方法从该行获取项目/对象。
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 表中显示收费栏?
→ 如果是,我想在两个选项卡中显示工具栏,
如何?
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 的生命周期,因此对此的任何了解都会非常感激!最好是一个工作示例:*我可以为您提供帮助的任何信息,请询问。
我发现与我的问题相关的唯一主题是这个旧主题,但没有答案。
谢谢!
vue.js - @click:row 未在 v-data-table (Vuetify) 中触发
我有一个来自 vuetify 的 v-data-table,其中有两个点击事件。一个被触发(deleteBooking),另一个不是(booking_clicked)?!该按钮用于删除项目。行点击事件是向用户显示点击行的附加信息。
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 使用的那个有什么不同?有没有办法在仍然使用主体插槽的同时解决这个问题?
javascript - Vue数据表排序不能正常工作
我有这个v-data-table
:
和标题:
如您所见,有一个恶魔quantity
(代码中的整数),我想使用此列进行表排序。默认情况下,它根本无法正常工作。不是quantity
领域,不是其他人。
我写道,这是代码中的整数列。另外,我试图在桌子sortable: false
上的其他列:sort-by="['quan]" :sort-desc="true"
上使用和,但它仍然不起作用。