问题标签 [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 回答
65 浏览

vue.js - 如何正确显示 v-data-table 中的所有用户?

我正在尝试在 a 内显示我在 Firebase 中拥有的所有用户v-data-table,但所有行都显示在一行中。

我希望三个用户在三个不同的行中,但结果是我的用户在一行中

0 投票
2 回答
12490 浏览

vue.js - Vuetify:在我的 v-data-table 顶部以及页脚中显示分页控件

v-data-table一个top插槽,pagination其结构与footer插槽的结构相匹配。是否可以分配top插槽以引用正在使用的相同(可能是v-pagination)控件footer

我的目标是复制表格顶部的分页控件(位于页脚中)。

0 投票
0 回答
602 浏览

filtering - Vuetify 自定义日期列过滤

我的表中有日期列。它们以MMM YYYY(例如JAN 2020)格式呈现给用户。我希望用户能够根据这些月份和年份进行过滤 - 如果他们输入“Jan”,他们应该得到所有 1 月份的行,等等。多年来相同。

根据数据表的 Vuetify文档:

search您可以通过向 prop 提供函数来覆盖与 prop 一起使用的默认过滤custom-filter如果您需要自定义特定列的过滤,您可以为filterheader items 上的属性提供一个函数。签名是(value: any, search: string | null, item: any) => boolean。即使search没有提供 prop,此函数也将始终运行。因此,您需要确保使用trueif 不应该应用过滤器的值提前退出。

我有几个标题,它们根据需要调用提供 filterDate 函数:

...以及函数本身:

...但这显然行不通-即使我制作了整个formatDatejust ,我也无法使其工作return true。我不知所措。

0 投票
1 回答
92 浏览

vue.js - 深入了解 v-data-table 中的对象超属性

基本上我需要传入一个对象作为我的 v-data-table 中所有列的值。

例如,而不是:

我需要将此设置为“项目”中的示例项目:

我知道通过使用模板我仍然可以只显示值,因为我只想显示值而不是代码:

我的问题是我的表中有很多列,而且它们是动态的。(“标题”和“项目”是从服务器动态生成的。)我宁愿不生成大量(30+)这些模板条件,但我现在真的看不到任何其他解决方案。

0 投票
1 回答
145 浏览

javascript - 从 json 获取数据以填充数据表

美好的一天开发人员......我正在尝试使用已经通过 fetch 获取并先前存储在我的 vuex 实例中的变量中并且现在在我的小程序中称为计算属性的信息动态填充数据表说我有这个:

和我的 html 标签调用这个计算和所有其他都是这样的:

但是该表没有显示任何结果,它与 v-simple-table 一起使用,但是一旦我尝试以这种方式进行操作,它就不会......任何建议......提前谢谢

0 投票
0 回答
145 浏览

vue.js - 我们如何使用 vuetify-data-table 根据屏幕截图进行设计

我使用 Vuetify-data-table 作为数据表,但我想要另一种格式的数据表。所以我在屏幕下方添加了我需要的内容。请帮我 。 在此处输入图像描述

0 投票
2 回答
16248 浏览

vue.js - Vuetify v-data-table 仅居中对齐一列

我有:

如何将该列的内容垂直居中对齐?

0 投票
0 回答
79 浏览

vue.js - 活动指示器未在 Vuetify 中正确加载

请帮助我正确实现此代码,因为它无法正常运行。按钮应该正确显示加载指示器并且应该是独立的。预先感谢您的慷慨。

下面是codepen的链接。 https://codepen.io/protemir/pen/MWwGaeO

0 投票
1 回答
328 浏览

vue.js - 使用 CRUD 操作 Vuetify v-data-table:带有动态表单的对话框不适用于 v-model

我有一个带有 CRUD 操作的 Vuetify v-data-table。可以使用对话框中的表单字段更改或删除表格条目。与手册中的示例(Vuetify v-data-table CRUD Actions)不同,我在对话框中有一个表单生成器。但是有了这个 v-model="editedItem" 不起作用。也许有人可以在这里帮助我。为了说明起见,我在代码盒中复制了整个内容。这是沙盒的链接:我在 codesandbox.io 上的示例

提前谢谢了。

0 投票
1 回答
177 浏览

vue.js - v-data-table 中的 Vuetify v-data-table:扩展项插槽中的内容故障

在 vuetify 表中,我不想显示一些标题及其对应的列。相反,我希望它们显示在扩展项目插槽中的表格中。表中的项目完全是用户可编辑的。这一切都很好。

问题是在扩展项目槽中,不仅显示了所选项目的属性,还显示了所有项目的属性。

在 vue-dev-tools 中正确显示。我想我在这里遗漏了一些基本简单的东西。有没有人有任何想法?

提前致谢

这是沙箱的链接:v-data-table 的扩展项插槽中的 v-data-table,用户可编辑