如何在vuetify.js 2中访问v-data-table之外的所有项目？
在vuetify.js 2中，要访问v-data-table之外的所有项目，可以通过以下几种方式实现：
- 使用Vue的ref属性：在v-data-table之外的组件中，可以使用ref属性给组件命名，然后通过this.$refs来访问该组件的属性和方法。例如，给一个组件命名为"myComponent"，可以通过this.$refs.myComponent来访问该组件。
- 使用事件总线：可以创建一个全局的事件总线，用于在不同组件之间进行通信。在v-data-table之外的组件中，可以通过$emit方法触发一个自定义事件，并在需要访问的组件中使用$on方法监听该事件，从而实现数据的传递和通信。
- 使用Vuex状态管理：Vuex是Vue.js的官方状态管理库，可以用于在不同组件之间共享数据。在v-data-table之外的组件中，可以将需要访问的数据存储在Vuex的store中，然后在其他组件中通过this.$store来访问和修改这些数据。
- 使用provide/inject：在v-data-table之外的组件中，可以使用provide属性提供数据，然后在需要访问的组件中使用inject属性来注入这些数据。这样可以实现跨组件的数据传递。
需要注意的是，以上方法都是基于Vue.js的特性来实现的，与vuetify.js并无直接关系。在实际应用中，可以根据具体的需求和项目架构选择合适的方法来访问v-data-table之外的项目。
关于vuetify.js的更多信息和使用方法，可以参考腾讯云的Vuetify.js产品介绍页面：Vuetify.js产品介绍
相关·内容
我正在使用Vuetify的：
<v-data-table
:ref="`sortableTable${index}`"
class="items-table-container"
:headers="headers"
:items="category.items"
hide-default-footer>
...custom rows
</v-data-table>
我注意到，当在桌子上添加一个新的项目时，它没有出现。我验证了我传递给它的项目有11项，但是该表只显示了10项。
浏览 6提问于2020-04-07得票数 18
回答已采纳
我想制作粘性标题，我尝试过“固定:真”--它不起作用。当我滚动表时，操作列的标题不是固定的，我已经在屏幕截图上标记了它。
这是我的桌子标签：
<v-data-table
:headers="headers"
:items="rooms"
sort-by="calories"
class="elevation-1"
fix-header
>
这是我的标题数据: headers：{ text："test"，value："action"，fixed
浏览 4提问于2019-12-10得票数 1
1回答
我有张这样的桌子，
我希望当我点击过滤器，按钮，所有的项目，无论是，男性，和有效的都是真正的被过滤。
users = [
{ name: 'ali', male: true, valid: true },
{ name: 'kevin', male: true, valid: false },
{ name: 'meri', male: false, valid: false }
]
get headerst() {
return [
{
text: 'user&#
浏览 3提问于2022-01-26得票数 0
回答已采纳
2回答
我有一个v数据表，第一列中的元素是一些真值和虚值。通过单击标题中的“sortable”图标，我在列中对这些元素进行排序。我想在打开页面时，首先对“true”值进行排序。我该怎么处理呢？
headers: [
{
text: '',
sortable: true,
value: 'status',
}]
Html：
<v-data-table
:pagination.sync="pagination"
:headers="headers"
:items="items"
&g
浏览 10提问于2022-02-02得票数 1
我正在使用<v-data-table>组件在我的应用程序中显示数据表。有没有办法在这个数据表中添加序列号列？它从项目数组的1开始到长度。
如果任何带有id的文章出现在第一位，它应该从1开始。
浏览 0提问于2020-06-03得票数 0
回答已采纳
1回答
当我的v-data-table呈现时，用于分页的<>箭头是不可见的。你可以点击他们应该在哪里，它工作，但他们只是看不见(页面计数显示)。
此外，当我打开行选择(show-select)时，这也不显示，尽管您可以单击它(出现一个快速淡入淡出的圆圈的简短图像，但框本身永远不会出现)。
另外，关于show-select，如果我使用一个槽来使用和s显示我的数据，我如何使用show-select呢？似乎当我这样做的时候，"show-select“被忽略了。
我使用的是2.0.1版本的Vuetify ( & js)和2.6.10版本的Vue ()。
浏览 10提问于2019-08-01得票数 2
1回答
我有一个v-virtual-scroll嵌套在一个v-data表中，如下所示： <v-data-table :items="itemsArray1">
(...)
<v-virtual-scroll :items="itemsArray2">
(...)
{{item.id}} this is the item id from itemsArray2 element
</v-virtual-scroll>
</v-data-table> 两者都有自己的“项目
浏览 12提问于2021-07-17得票数 1
3回答
Vuetify's v-data-table component有一个fixed-header功能，当height小于表格高度时，它会使标题粘滞。 当显式设置height时，它可以正常工作。 HTML： <v-content id="mycontent">
<v-container fluid id="mycontainer">
<h2>Header</h2>
<div id="outer">
<v-
浏览 63提问于2019-08-29得票数 3
我是Vue的新手，我在处理数据。我正在使用Vuetify的数据表创建一个组件，该组件在页面加载时向我的后端发送请求，接收一些数据并在datatable上显示该数据。
这是我目前的代码：
<template>
<v-data-table
:headers="headers"
:items="balances"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</template>
浏览 3提问于2020-12-26得票数 2
回答已采纳
我使用输入键从v- the区域输入数据，结果如下
Hello\nWorld
在默认情况下或rawHtml无法工作的v数据表中将其呈现出来。
<v-data-table
:headers="headers"
:items="dataTable"
hide-default-footer>
<template v-slot:item="props">
<tr>
<td><span v-html="props.item.s"></span></td> &
浏览 4提问于2019-11-08得票数 3
我正在尝试将一个PouchDB文档绑定到一个v-data-table组件。
我的超文本标记语言和JS代码在这里：
当我获得数据时，应用程序抛出以下错误：
[Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got Object.
found in
---> <VDataTable>
<HelloWorld> at src\components\Note\NotesForm.vue
<VContent>
浏览 4提问于2018-03-21得票数 0
我正在做我的vue.js项目，我正在使用Vuetify。现在，我已经从文档中创建了一个如本例所示的datatable：
https://codepen.io/pen/?&editable=true&editors=101
我希望有一个带有-和+按钮的相同的表(正如您在代码笔中看到的，在类别名称周围)。
当我在浏览器中检查代码时，似乎有一些按钮，但它们没有显示代码示例模板中的按钮。
有谁知道如何实现它吗？
下面是codpen中的代码：
<div id="app">
<v-app id="inspire">
<
浏览 4提问于2019-08-29得票数 0
我是Vue & Vuetify的新手，我正试图解决一个显示表的问题，其中包含了一些数据。我希望在最后一栏中有一个删除图标，所以当他们点击时会采取一些行动。但是，当显示项目时，我无法获得要显示的图标。我可以获得要显示的数据(使用模板或默认的:items)，也可以让图标显示并响应单击。我不能同时获得数据和图标。
这是我的代码：
下面是我的代码示例：
...
<v-data-table
:headers="fobHeaders"
:items="selected.scannedDevices"
:items-
浏览 2提问于2022-02-23得票数 2
回答已采纳
我正在尝试找到一个解决方案来修改我的分页组件。我想要显示每两个或每三个网站使用vuetify分页组件。基本版本允许显示每一页。 模板： <div class="text-center">
<v-pagination
v-model="page"
:length="4"
prev-icon="mdi-menu-left"
next-icon="mdi-menu-right"
></v-pagination>
浏览 33提问于2020-11-02得票数 0
回答已采纳
1回答
我正在使用v-data-table，并且我希望在选择一行时获得行Id。 这是我的代码 <v-data-table
item-key="id"
v-model="selected"
show-select
:headers="headers"
:items="users">
</v-data-table> 当我选择一行时，它会给我一些提示： [
{id:2 , name:"kevin" , a
浏览 15提问于2021-10-17得票数 1
1回答
Vuex更新数组作为对象的值
、、、、
在Vuex存储中，我遇到了在稍微嵌套的数据结构中更新数据的问题。
我的整个项目比下面的要复杂一些，但是我现在遇到的问题是简化和设置的，以便每个项目页面都有一个包含表可见性的登陆页面，以及单独的表组件，其中有一个Vuetify v-data-table元素，它只是将标题和项作为道具并显示出来。它可以形象化如下：
- Project Page
|- Landing page
|- Table Visibility
|- Table Component
|- v-data-table
一种思考方法是:对于每种动物(项目页面)，有三种不同的品种/类型，每种都有不
浏览 2提问于2019-02-22得票数 0
回答已采纳
我一直在Vuetify.js框架中使用v数据表，我需要在v数据表中添加一些按钮和textfield。V数据表非常有用，但我很难添加其他组件。这是我的第一次实验，但没有成功。我想在每一行中添加v-btn。但是“发生了错误”。错误信息在我的代码下面。
有人建议我吗？
<template>
<div>
<v-data-table
dense
:headers="header"
:items="items"
class="elev
浏览 1提问于2020-08-06得票数 0
回答已采纳
2回答
我正着手将我的项目与vuetify集成起来，我正试图按照教程和设置一个表，但我无法使它在这里工作-- index.cshtml的代码
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2
浏览 4提问于2021-12-29得票数 2
回答已采纳
您好，感谢您阅读我的问题。
我有一个对象数组，看起来像这样：
[{
id=1,
products= [a,b,c]
},
{
id=2,
products= [d,e,f]
}]
我想在一个有两列(id和products)的v- data -table中显示数据，并在一个嵌套的v-data-table中显示products item。
到目前为止，我发现我应该使用模板和v-slot，但我没有找到正确的方法。
<v-data-table
item-key="id"
items={products}
浏览 46提问于2021-02-25得票数 0
回答已采纳
我想在v-data-table中弹出选定的行，这样我就可以突出显示select row。实际上，我在v-data-table中执行编辑功能，如图所示 ? 。这里有人能帮我解决这个问题吗？很可能是与CSS相关的。我精通VueJs，但不太精通CSS
浏览 63提问于2021-02-04得票数 1
1回答
你知道如何使用道具来检查状况吗？ 例如 <template>
<v-data-table
:headers="headers"
:items="fixtures"
:items-per-page="5"
class="elevation-10"
>
<template v-slot:item.on="{ item }">
<
浏览 8提问于2019-10-09得票数 1
我有一个Vuetify数据表，我正在尝试将一个图标添加到包含蛋白质的<td>中，但它的呈现方式，我不能理解我该如何去做？ 因此，我有一个要导入Vuetify数据表模板的组件，该组件分别由图标div组成。 <template>
<v-data-table>
<template v-slot:items="props">
<my-component
:protein="props.item.protein"
:carbs="props.item.ca
浏览 16提问于2019-09-11得票数 2
我有一个v-data-table，它已经启用了:search和:sort-by。我现在已经创建了一个select，我从VueX中拉入我的状态。接受，拒绝。我要做的不仅是搜索或排序，而且当从下拉列表中选择时，表中只显示接受的值。 <v-select
v-model="selectStatus"
label="Status"
:items="statusData"
item-value="id"
item-text="name"
return-object
浏览 78提问于2021-03-23得票数 0
我想做一个自定义按钮，当点击时，它会在它下面弹出一个v-data-table。我基本上是在单击一个按钮时显示一个数据表，并使用此转换
但是过渡会让表格更多地向右移动，并且有一个带有不透明背景的活动状态，基本上有很多内置的样式使得表格很难下拉到按钮下面，因为默认行为是当你点击过渡时，弹出的项目覆盖了按钮。
下面是导致这种情况的代码
<v-menu transition="scroll-y-transition" class="scroll-button">
<template v-slot:activator="{
浏览 41提问于2021-05-26得票数 0
我刚刚将vuetify.js从1.5迁移到2.1.7。以前，我可以访问总编号。使用:pagination.sync="pagination"属性和pagination.totalItems访问v-data-table外部的数据表中的项(反应性)。
证明1.5
<template>
<div>
<span>Total: {{ pagination.totalItems }}</span>
<v-data-table :pagination.sync="pagination"
浏览 14提问于2019-11-07得票数 1
1回答
我正在使用，我有一个。我想使用选择一个客户端，但是当我点击收音机时，我的v数据表中的所有收音机都被选中了。我需要点击一个单选按钮，只有一个已经被选中。
html:
<v-data-table :headers="headersAllClientesCadastrados" :items="AllClientesCadastrados" :search="searchAllClientesCadastrados">
<template v-slot:item="row"&g
浏览 1提问于2020-12-19得票数 1
回答已采纳
我已经为Vuetify的v- data -table动态更改了数据： <v-data-table
:headers="table_headers"
:items="table_content"
>
</v-data-table> 在table_headers中，我可以添加"class“，这样就可以将自定义的css格式应用于标题： table_headers: [
{
text: 'Dessert (100g serving)'
浏览 34提问于2021-04-15得票数 2
回答已采纳
关于vuetify 2.0v-data-tables的文档没有指定如何通过v-slot:body控制扩展项。我有一个需要用body v-slot指定的表，并希望使用扩展功能。
预期行为是通过单击表中某一列中的按钮，下面的行将展开。
我使用v-slot:body，因为我需要完全定制列内容。我正在从vuetify 1.5迁移代码，其中props.expanded启用了此功能。
Codepen：
<template>
<v-data-table
:headers="headers"
:items="deserts"
:ex
浏览 45提问于2019-11-06得票数 5
回答已采纳
我有一个用vue制作的页面，使用vuetify。它显示一个v数据表，该表可以展开以显示另一个v数据表，如下所示：
<div class="subsection">
<v-data-table
:headers="prescriptionHeaders"
:items="pendingItems"
show-expand
item-key="id"
>
<tem
浏览 8提问于2021-07-28得票数 1
2回答
我想更改v数据表中选定行的背景色。
<v-data-table dense :headers="headers"
:items="records"
@click:row="handleClick"> <!-- handleClick is a function that logs item for the moment... -->
<template v-slot:[`item.index`]="{item}">
<v-row justi
浏览 10提问于2022-10-11得票数 0
1回答
我有一个数据表，其中有有效的任务和非有效的任务.我的表可以正常工作，但问题是，我希望将无效的行涂成红色，以便用户知道修复它们(不，在我的一端修复它们不起作用)。
我读过这个项目类道具会起作用，但是它似乎在我的情况下不起作用？
下面是数据表的设置：
<v-data-table
disable-pagination
hide-default-footer
:headers="headers"
:items="tasks"
:hide-default-header="tasks == 0"
:item-class="
浏览 10提问于2022-10-31得票数 0
1回答
数据表显示总页数
、、
早上好，我正在使用v-data表在我的项目中创建带有分页的表。所有的工作都是正确的，我只是尝试增加总页数的分页。我现在拥有的是：
<v-data-table
:headers="headers"
:items="filteredList"
:items-per-page="7"
no-data-text="No results"
:footer-props="{
浏览 5提问于2022-01-25得票数 0
1回答
自定义验证数据表分隔符
、、、
当v-data-table在移动视图上时，项目之间的分隔符不清楚。如何自定义此分隔符，例如线宽和颜色？
我想做的是：
来自的代码示例
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</template>
浏览 18提问于2020-05-15得票数 3
我有一个带有<v-data-table>的组件，其中包含不同的项。在每一行中都有一个按钮，用于打开显示有关所选项目的详细信息的<v-dialog>。我的问题是，我不想要一个大的组件，而是不同的，更小的组件。所以我的问题是，我如何将我想要在对话框中显示的项目传递给另一个组件中的对话框？
下面是打开对话框的Vue-code。
<template v-slot:item.open="{ item }">
<v-tooltip top>
<template v-
浏览 1提问于2019-12-13得票数 2
我需要点击图标在子组件"comandasInd“中显示一个项目的数据 <template>
<v-data-table :items="comandas">
<template v-slot:items="props">
<td>{{ props.item.nombre }}</td>
<v-icon @click="abrirComanda(props.item)">
book
</v-icon
浏览 26提问于2019-10-04得票数 0
回答已采纳
我开始自己使用Vue.js和Vuetify了。这是一次狂野而有趣的旅程！我遇到了一些问题，我不确定这是一个bug还是我自己的问题。我一直在Vuetify网站上运行教程，在我的concole上遇到了这个错误
webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:588 [Vue warn]: Unknown custom element: <v-tooltip> - did you register the component correctly? For recursive components, make s
浏览 1提问于2018-07-21得票数 0
回答已采纳
我在Nuxt项目中使用Vuetify。通过在v-data-table中使用插槽no-data，我能够修改"No data available“消息。如果我使用道具no-data-text，它也可以工作。 <v-data-table>
<template slot="no-data">
My no data message
</template>
</v-data-table> 或 <v-data-table no-data-text="My no data message">&
浏览 94提问于2021-05-03得票数 0
我有以下代码，它呈现预期的表：
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
</v-data-
浏览 131提问于2019-11-12得票数 1
我使用的是一个v数据表，它的选项是"show-select"，它显示每行后面的复选框，但是我不知道如何实际知道哪些行被选中并得到它们的值.
这是密码
<v-data-table
:headers="TopicHeaders"
:items="allTopics"
:search="searchTopics"
show-select
class="elevation-1"
item-key="name"
></v-data-table>
谢谢
浏览 2提问于2020-04-19得票数 5
回答已采纳
我需要逐行获取事件，但它只给了我事件和不败，如何在v-data-table中捕获项目
<v-data-table
:headers="showHeaders"
:page="page"
:pageCount="numberOfPages"
:options.sync="options"
:loading="loading"
:server-items-length="totalIte
浏览 40提问于2021-06-01得票数 2
回答已采纳
1回答
我有一个v-data-table，其中包含这样的项
<v-data-table :items="items" ...>
<template slot="items" slot-scope="props">
<td>{{props.index}}</td>
<td>{{props.name}}</td>
</template>
</v-data-table>
有超过20个项目，我正在尝试维护行索引。当我使用props.index时，它总
浏览 1提问于2018-12-08得票数 0
5回答
我需要在我的nuxt项目中使用vuetify作为插件。我试过包，但是出错了
无法指定对象“#”的只读属性“基”
我已经在本地服务器和共享主机的官方在线操场上安装了我的nuxt项目。一直以来我都犯了同样的错误。我尝试使用npm和yarn安装节点模块。如何用npm包将最新版本的nuxt作为插件添加到最新版本？
浏览 2提问于2020-01-06得票数 6
1回答
我在另一个数据表的扩展项槽内有一个v数据表。我想访问子项目中父项的ID。我用一个
在扩展的项目槽内，在该段中，我可以显示id。但是，在子数据表中，我不知道如何使用这个值。
<v-data-table
:headers="headers"
:items="financialDocuments"
:single-expand="singleExpand"
item-key="finDocId"
show-expand
>
<tem
浏览 2提问于2022-06-22得票数 0
在下面的示例中，是否有任何方法可以使用CSS截断单元格中的文本(而不是让它环绕或溢出)？理想情况下，CSS应该如下所示：
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
但是，如下所示，这只会导致单元格占用所有的空间：
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,
浏览 0提问于2020-04-04得票数 4
回答已采纳
我正在使用vuetify数据表，我在页面上有3个数据表，所有的表都会根据页面上最大的表改变它们的大小，但我不想要这个功能。我希望他们应该捕获他们需要的大小，而不是根据最大的一个来扩展表的大小。有人知道为什么会有这种行为吗？下面是我的代码结构：
<tamplate>
<div align="center" style="width: 100%;">
<v-container grid-list-md fluid>
<v-layout row wrap>
<v
浏览 0提问于2018-04-12得票数 0
1回答
我正在尝试像这样定制我的v-data-table中的所有标题
<v-data-table
:headers="headers"
:items="desserts"
:disable-sort="true"
:hide-default-footer="true"
>
<template v-slot:header="{ header }">
{{ head
浏览 4提问于2020-11-04得票数 1
回答已采纳
2回答
我正在开发一个节点和电子应用程序。我使用vuetify来生成从oracle数据库加载数据的表(v- data - table )。数据根据输入值变化，但表不更新！
当输入值改变时：process.env.ANO_SEM = input.val()
然后调用loadData()函数
process.env.ANO_SEM作为getEventos()函数中的查询参数
我的代码：
$('#input').keyup(e => {
if (e.keyCode == 13) {
process.env.ANO_SEM = $('#i
浏览 1提问于2019-07-23得票数 1
回答已采纳
在vuetify表中，我不想显示一些标题和相应的列。相反，我希望它们显示在扩展项插槽中的表中。表中的项目完全是用户可编辑的。这一切都运行得很好。 问题是，在扩展项插槽中，不仅显示所选项的属性，而且还显示所有项的属性。 在vue-dev-tools中，它显示正确。我想我在这里遗漏了一些根本上简单的东西。有谁有什么想法吗？ 提前感谢 下面是沙箱的链接：v-data-table in expanded-item slot of v-data-table, user editable
浏览 23提问于2020-03-26得票数 0
回答已采纳
1回答
当我为插槽体定制了一个实现时，我无法理解如何使用实现的select all选项。
下面是一个小小的例子：
<template>
<v-card
max-width="300"
class="pa-6"
>
<v-data-table
:items="tasks"
:headers="headers"
show-select
dense
>
<template v-slot:body="
浏览 1提问于2019-08-27得票数 15
回答已采纳
1回答
我使用的是具有可扩展行的v-data-table。我想要在单击展开箭头时获取行的值。我知道我可以使用@click:row来获取单击行时的值，但是特别是单击箭头不会有同样的效果。如何在直接单击展开箭头时获得此值？ 下面的v-data-table是相当基础的。我想在展开箭头单击时调用一个方法，该方法从该行获取项目/对象。 <v-data-table
:expanded.sync="expanded"
:headers="tableHeaders"
:items="myData"
:single-expand=&
浏览 41提问于2021-11-06得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
