问题标签 [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 投票
4 回答
677 浏览

vue.js - Vuetify v-data 表获取索引

嘿,我是 vue js 和 vuetify 的新手。在我的 editProductSave 中,我想传递另一个变量,它是表中行的索引。这是我当前的代码,我将如何实现?该表是使用 vuetify v-data-table 绘制的

整个代码

0 投票
1 回答
50 浏览

vue.js - 将图像动态插入“v-data-table”

接收到具有固定路径的图像,但我想用每个对象的图像路径来表达图像。我想自动跟随的imgsrc路径值items

下面的代码是我试过的代码。

即使我填写上述内容也会有错误。

它出什么问题了?帮我...

0 投票
2 回答
394 浏览

vue.js - 增加 v-data-table Vuetify 中标题的字体大小

我正在尝试增加标题的字体大小,以使其与使用 v-data-table 绘制的表中的行更具特色。我参考了类似问题问题 1问题 2中的解决方案,但解决方案似乎不起作用。随附的代码还负责使用 Google 开发人员工具(检查元素)编辑的标题的文本大小。关于在哪里或如何编辑这部分代码的任何建议

检查表头的元素

代码 :

脚本代码:

0 投票
0 回答
925 浏览

vue.js - v-data-table 中带有自定义组件和帮助器的动态项目模板槽

假设我有一个使用 Vuetify 的自定义组件v-data-table

在这个组件中,还有多个其他自定义组件,例如加载器和特定的基于列的组件,用于以某种方式显示数据。

我发现自己在整个项目中使用相同的代码进行过滤、检索数据、加载程序等 - 所以不是很干。

不同的事情是:

  1. 用于检索数据的 API 请求 url(我可以将其传递给这个通用组件)

  2. 标题v-data-table(我传递给这个通用组件)

  3. 特定项目插槽模板!(使用相同代码的一个文件需要如下修改列,有时也需要不同的组件):

    例如,另一个人会有:

    我显然使用了更多独特的“列模板”,这只是一个示例。

  4. 修改v-data-table在计算属性中传递的项目(添加“操作”或运行清理和/或在显示内容之前修改内容 - 与实际 HTML 输出无关,但与值本身无关)

  5. 我可以在某些模板槽项修改上使用一些独特的方法,例如下面的 dateMoreThan24HoursAgo():

    我总是可以使这个全局化或将它们作为道具提供,所以这一点不应该是一个大问题。

所以我的问题是:

  1. v-data-table在将数组传递给 v-data-table 之前,使用带有内部但动态传递模板槽的组件以及允许项目修改的最佳方法是什么(根据上面的第 3 点和第 4 点)
  2. 有没有更好的方法来解决这个问题,因为这看起来太复杂了(我应该只保留单独的特定文件)吗?它感觉不是很干燥,这就是为什么我不太喜欢当前的解决方案。

基本上我会很高兴有这样的东西:

然后我就像这样调用我的动态组件:

相关但不完全是我的问题的解决方案:

0 投票
0 回答
168 浏览

vue.js - v-data-table 数据的水平表示

期望的结果

就像 v-data-table 中的图片。可以用rowspan来表达吗?

或者如果您使用 span 更改行和列,您可以这样表达数据吗?

ex) 当 test1 中的一个项目接收到下一个人 (test2) 的项目的值时,它被确定为一个新值并显示在下一行。

请让我知道如何解决它。

现在的进展

0 投票
1 回答
42 浏览

vue.js - 如何指定'v-data-table group-by'的槽

结果照片 我想像结果图片一样水平地表达数据。

我想从 v-data-table 指定一个插槽以按(类)分组,但无法识别。

如果你知道怎么做,请告诉我。

请让我知道是否有除分组以外的其他方式。我们应该交换行跨度还是行/列?我正在考虑。 这是目前的进度图。

0 投票
1 回答
97 浏览

javascript - 如何更改 v-data-table 中的单行(不是样式,内容)

我无法为 v-data-table 的这个用例找到答案。我知道您可以使用模板和插槽来修改某个列,但是如果我希望我的值仅反映在一行中怎么办?因此,在我的代码中,每次用户右键单击名称列时,它都会添加一个徽标以显示已复制的值,然后在 3 秒后将其从名称中删除 - 有点像切换效果。

每当我单击某行上的名称时,它都能正常工作,并使用 vue-clipboard 的库复制该特定链接的链接值。但是,它也对所有其他具有链接的列执行相同的操作。我只想为一个人做这件事。我无法让 vue-clipboard 库在沙箱中运行,所以我分享了我的代码片段。

为了更好地展示当前行为,这是来自 v-data-table 的截图。(如您所见,即使我只单击第一行,它也会在两行中显示复选图标。预期的行为只会显示已单击单元格的复选图标。在此处输入图像描述

模板;

脚本;

0 投票
1 回答
1085 浏览

vue.js - 在 v-data-table 标题中实现一个复选框

我有一个 v-data-table,其中有带有复选框的行。我正在尝试在表格标题中实现一个复选框,其中选择该复选框将选择表格行中的整个复选框。

这是我的代码:

我确实尝试了https://vuetifyjs.com/en/components/data-tables/#row-selection的解决方案,但我想要实现的更像是:

在突出显示的地方需要复选框

任何有关实现这一目标的指针将不胜感激。

0 投票
1 回答
172 浏览

vue.js - 在 V-data-table 中使用 axios show VUE.JS API 数据不起作用:它没有显示数据

我是一个初学者,我尝试使用 Vue.js 和 Vuetify 访问 API 并显示表格。我从 API 获取数据,但我无法通过 v-data-table 显示它。

这是我的代码:

HTML 部分

脚本部分

这是我得到的输出

这就是我想要的

0 投票
1 回答
168 浏览

vue.js - 使用 v-select 将 API 休息到 v-data-table 但 v-data-table 无法显示,所以我使用 v-for 来

目的:

  • 1.Rest API >>> by axios
  • 2.选择类别>>>通过v-select
  • 3.Show table >>> by v-data-table但我无法显示表格所以我使用 v-for 显示但我得到了这个

在这里我得到 它显示许多表(根据数据集的数量)

这是我的代码 HTML 部分

脚本部分

Vue&Vuetify 对我来说是新的。如果您有任何建议,请告诉我。

我尝试删除 div <div v-for="(item, i) in data" :key="i" ></div>但是当我刷新此页面时它消失了并且只显示空表 只显示空表