问题标签 [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.
vue.js - Vuetify v-data 表获取索引
嘿,我是 vue js 和 vuetify 的新手。在我的 editProductSave 中,我想传递另一个变量,它是表中行的索引。这是我当前的代码,我将如何实现?该表是使用 vuetify v-data-table 绘制的
整个代码
vue.js - 将图像动态插入“v-data-table”
接收到具有固定路径的图像,但我想用每个对象的图像路径来表达图像。我想自动跟随的imgsrc
路径值items
。
下面的代码是我试过的代码。
即使我填写上述内容也会有错误。
它出什么问题了?帮我...
vue.js - v-data-table 中带有自定义组件和帮助器的动态项目模板槽
假设我有一个使用 Vuetify 的自定义组件v-data-table
。
在这个组件中,还有多个其他自定义组件,例如加载器和特定的基于列的组件,用于以某种方式显示数据。
我发现自己在整个项目中使用相同的代码进行过滤、检索数据、加载程序等 - 所以不是很干。
不同的事情是:
用于检索数据的 API 请求 url(我可以将其传递给这个通用组件)
标题
v-data-table
(我传递给这个通用组件)特定项目插槽模板!(使用相同代码的一个文件需要如下修改列,有时也需要不同的组件):
例如,另一个人会有:
我显然使用了更多独特的“列模板”,这只是一个示例。
修改
v-data-table
在计算属性中传递的项目(添加“操作”或运行清理和/或在显示内容之前修改内容 - 与实际 HTML 输出无关,但与值本身无关)我可以在某些模板槽项修改上使用一些独特的方法,例如下面的 dateMoreThan24HoursAgo():
我总是可以使这个全局化或将它们作为道具提供,所以这一点不应该是一个大问题。
所以我的问题是:
v-data-table
在将数组传递给 v-data-table 之前,使用带有内部但动态传递模板槽的组件以及允许项目修改的最佳方法是什么(根据上面的第 3 点和第 4 点)- 有没有更好的方法来解决这个问题,因为这看起来太复杂了(我应该只保留单独的特定文件)吗?它感觉不是很干燥,这就是为什么我不太喜欢当前的解决方案。
基本上我会很高兴有这样的东西:
然后我就像这样调用我的动态组件:
相关但不完全是我的问题的解决方案:
javascript - 如何更改 v-data-table 中的单行(不是样式,内容)
我无法为 v-data-table 的这个用例找到答案。我知道您可以使用模板和插槽来修改某个列,但是如果我希望我的值仅反映在一行中怎么办?因此,在我的代码中,每次用户右键单击名称列时,它都会添加一个徽标以显示已复制的值,然后在 3 秒后将其从名称中删除 - 有点像切换效果。
每当我单击某行上的名称时,它都能正常工作,并使用 vue-clipboard 的库复制该特定链接的链接值。但是,它也对所有其他具有链接的列执行相同的操作。我只想为一个人做这件事。我无法让 vue-clipboard 库在沙箱中运行,所以我分享了我的代码片段。
为了更好地展示当前行为,这是来自 v-data-table 的截图。(如您所见,即使我只单击第一行,它也会在两行中显示复选图标。预期的行为只会显示已单击单元格的复选图标。
模板;
脚本;
vue.js - 在 v-data-table 标题中实现一个复选框
我有一个 v-data-table,其中有带有复选框的行。我正在尝试在表格标题中实现一个复选框,其中选择该复选框将选择表格行中的整个复选框。
这是我的代码:
我确实尝试了https://vuetifyjs.com/en/components/data-tables/#row-selection的解决方案,但我想要实现的更像是:
任何有关实现这一目标的指针将不胜感激。