通过代码关闭v-data-table中展开的行
v-data-table是Vuetify框架中的一个组件，用于展示数据表格。通过代码关闭v-data-table中展开的行，可以通过以下步骤实现：
- 首先，需要在Vue组件中引入v-data-table组件和相关依赖：
import { VDataTable } from 'vuetify/lib'- 在Vue组件的template中使用v-data-table组件，并设置相关属性和事件：
<template>
<v-data-table
:items="items"
:expanded.sync="expanded"
item-key="id"
show-expand
@click:row="toggleExpand"
>
<!-- 表格列定义 -->
</v-data-table>
</template>其中，:items属性绑定了数据源，:expanded.sync属性绑定了展开行的状态，item-key属性指定了数据项的唯一标识，show-expand属性设置展开按钮可见，@click:row事件监听行的点击事件。
- 在Vue组件的script中定义相关数据和方法：
export default {
data() {
return {
items: [
// 数据项定义
],
expanded: []
}
},
methods: {
toggleExpand(item) {
const index = this.expanded.indexOf(item)
if (index > -1) {
this.expanded.splice(index, 1)
} else {
this.expanded.push(item)
}
}
}
}其中，items数组存储了数据项，expanded数组存储了展开行的状态。toggleExpand方法用于切换展开行的状态，通过判断expanded数组中是否包含当前行的数据项来决定展开或关闭行。
通过以上步骤，就可以通过代码关闭v-data-table中展开的行。当用户点击行时，会触发toggleExpand方法，根据行的状态来切换展开或关闭行。
相关·内容
2回答
Vuetify数据表按列展开行
、、、、
我有一个包含可扩展行的vuetify数据表。我与唯一真正的区别是，我希望item.name列像雪佛龙图标一样打开/关闭可扩展的行。当我在该列的v槽上放置一个@click处理程序时，我得到了错误Error in v-on handler: "TypeError: expand is not a function"。这是我唯一需要定制的列，所以我不想手工构建整个<tr> v-槽。下面是一个缩小的代码示例。谢谢。
<v-data-table
:headers="headers"
:items="products"
浏览 12提问于2021-01-09得票数 5
回答已采纳
如何为没有数据的行隐藏展开图标？
<v-data-table
:headers="headers"
:items="items"
:options.sync="options"
:footer-props="{
'items-per-page-options': [20, 50, 100],
'items-per-page-text': '',
}"
show-expand
dense
>
<template #ite
浏览 5提问于2022-03-08得票数 1
回答已采纳
4回答
我正在使用Vuetify.js，我正在创建一个v-data-table
我想不出如何通过单击行上的任何位置来展开行，似乎唯一的可能是使用show-expand属性并单击图标。
终解
按照建议的，v-data-table可以将数组链接到其expanded属性，因此如果您将任何项从表中推送到该数组，它将展开相应的行。直觉和聪明
<template>
<v-data-table
:headers="headers"
:items="items"
:expanded="expanded"
item-k
浏览 1提问于2019-08-28得票数 10
回答已采纳
1回答
我的VueJS和Vuetify项目有问题。我想要创建一个具有可扩展行的表。这将是一个订单表，有可能看到为每一个购买的产品。对于一个页面，它应该显示至少100行订单。为此，我使用了Vuetify框架中的<v-data-table>。
有什么问题吗？
在准备好一切之后，我意识到它可以工作，但是对于每一行的扩展，我必须等待几秒钟(这太长了--它必须是一个快速的系统)。对于展开所有可见记录，需要等待超过20秒，整个页面滞后。
我试过什么？
我从标准<v-data-table>开始，用一个show-expand道具和一个expanded-item插槽--这是我第一次尝试--是
浏览 1提问于2020-04-27得票数 0
回答已采纳
1回答
我真的不知道时隙镜是怎么工作的。想知道是否有人能帮我解决这个(表面上)很简单的问题。
<v-data-table>
<template slot="items" slot-scope="props">
<tr @click="props.expanded = !props.expanded">
我想要做的是手动更新“道具”，以基于外部事件展开此行。问题是，我不知道如何在上面提到的上下文之外访问它。props.expanded = !props.expanded运行得很好。
有什么想法吗？
浏览 5提问于2017-12-07得票数 3
当前解决方案()：
<template>
<v-data-table
class="row-pointer"
></v-data-table>
</template>
<style scoped>
.row-pointer >>> tbody tr :hover {
cursor: pointer;
}
</style>
有了这个CSS光标，即使在扩展的项目区域内，指针也变成了指针，这不是我想要的。有人能给我一个更精确的CSS吗？
浏览 6提问于2022-06-04得票数 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
注意：最初的答案是Vuetify 1.5.7，但是在主要版本中API被更改了。
对于Vuetify 1.X，请使用。
对于，Vuetify，2.x，，使用或。
我有一个带有DataTable组件(Vutification1.5.7)的页面，并使用默认组件的分页。我使用“每页行”属性设置了“每页行”选择值。
现在，我希望在进入页面时，从这个行/页项数组(，而不仅仅是第一个！)中设置初始值。
有可能吗?我该怎么做？
表的示例代码如下所示：
<v-data-table
:headers="headers"
:items="
浏览 2提问于2019-03-29得票数 16
回答已采纳
2回答
我想在v-data-table中创建一个下拉菜单选项。
<v-data-table
:headers="headers"
:items="res"
:options.sync="options"
:server-items-length="totalRes"
:loading="loading"
loading-text="Loading ..... Please wait"
:footer-props=
浏览 4提问于2020-02-25得票数 3
回答已采纳
我有一个可用的v-data-table，并且能够使用模板定制显示的行。一旦更新到vuetify 2.0 (下面的代码链接)，该代码将不再起作用。我假设vuetify发生了一些变化，但我不确定是什么。 Example <v-data-table
:headers="headers"
:items="desserts"
class="elevation-1">
<template v-slot:items="props">
<td>{{ props.item.n
浏览 24提问于2019-08-25得票数 1
回答已采纳
我创建了一个基于CustomDataTable的<v-data-table>组件
CustomDataTable.vue
<template>
<div>
<v-container fluid>
<v-data-table
...
>
<!-- custom implementations -->
<v-data-table>
<v-container>
<!-- custom implement
浏览 10提问于2022-06-10得票数 -1
我有以下代码，它呈现预期的表：
<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
我创建了一个BaseDataTable，它使用了一个<v-data-table>，默认设置了几个道具：
<template>
<div>
<v-container fluid>
<v-data-table
dense
<!-- other props -->
></v-data-table>
</v-container>
<!-- utilities -->
</div>
</template>
当我尝试时，我发
浏览 10提问于2022-06-05得票数 0
我正在尝试将v-data-table中的边界间距i更改为：
border-spacing: 0 0.5rem;
我试着用css设置它：
v-data-table > div > table {
border-spacing: 0 0.5rem;
}
或
.v-data-table table {
border-spacing: 0 0.5rem;
}
但这两种方法都没有奏效。你知道如何在v-data-table中改变行之间的空格吗？
浏览 34提问于2020-03-04得票数 1
回答已采纳
我试图构造一个v-data-table，并在观察expanded.sync值时观察到非常奇怪的行为。第一层expanded.sync值看起来正常，但第二层expanded.sync有3个连续的相同记录。 我打算观察这个值，在折叠展开项时做一些事情。当展开的项目被折叠时，有什么解决方案可以检测吗？ 顶层代码 <template>
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
:expanded.sync=&
浏览 152提问于2021-01-17得票数 3
回答已采纳
下面的截图是中的一个例子
它的代码是：
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</template>
我想知道如何在每一行中添加一个<v-btn>以导航到另一个组件？
例如，在每一行中添加一个包含名为"view“的按钮的列，然
浏览 2提问于2020-04-29得票数 0
回答已采纳
1回答
我正在尝试使用v-card中的v-data-table，您可以从以下代码中看到代码
<v-data-table
:headers="headers"
:items="items"
:search="search"
:sort-by="id"
:sort-desc="true"
>
当我单击每页行数选项时，菜单根本不显示。在我的应用程序中，整个每页行数下拉菜单根本没有完全显示出来。所以，我希望这些问题可能是相关的
浏览 7提问于2021-05-30得票数 0
1回答
我正在使用vuetify v-data-table组件。我在这里面临的问题是最后一行没有显示。现在我得到的输出是 James
Jack
William
Ross 但实际输出如下所示 James
Jack
William
Ross
Jimmy 如果我从fetchUser方法中删除unshift代码，那么我会得到 Jack
William
Ross
Jimmy 所以基本上它只显示4个项目，但实际上应该是5个项目。如果我检查控制台中的users数组，它会显示所有5条记录，但在v-data-table中，它只显示4行。请帮我找出哪里出了问题。 <template>
<di
浏览 54提问于2021-04-27得票数 0
2回答
我在我的项目中使用ui网格。
我在ui网格中使用功能。
我只需要做一排就行了。
例如，如果我单击第5行上的“+”号，然后在第2行上单击“+”号，则第5行必须关闭，第2行必须展开。
知道如何在ui-网格中实现这种行为吗？
浏览 4提问于2015-11-15得票数 1
回答已采纳
3回答
我正在构建一个虚拟<v-data-table>，在最右边的列上有按钮图标。当数据行悬停时会出现按钮图标。我希望数据行在单击该行时展开，但它不起作用。
当前代码实现
代码创建<v-data-table>，如下所示：
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
class="elevation-1"
:items-per-page="5"
浏览 2提问于2020-07-03得票数 2
回答已采纳
3回答
我用v-data-table来管理电子邮件。用户可以单击一行并显示带有电子邮件详细信息的弹出窗口。
我想要的东西：
我希望在单击这些行之后，将行标记为"readed“(因此css粗体/非粗体)。
问题：
我已经在这里找到了一些例子(但只适用于较旧的Vuetify版本)：
这个示例(以及我找到的所有其他示例)使用扩展代码来处理类似v-data-table的代码：
<v-data-table :headers="headers" :items="desserts" class="elevation-1">
<templa
浏览 0提问于2019-08-14得票数 9
1回答
我有一个问题我不能用vue和vuetify来解决。我有两行，上面一行的大小是固定的，因为那里的数据是固定的。但是在第二行，我有两列是数据表，数据可以很长，但我想显示全部，而不仅仅是几行。所以我想实现的是，当较低的一行比窗口的高度高时，滚动条就会出现在v-flex/v-card中。 下面是代码：https://codepen.io/anon/pen/mgKERm <div id="app" style="height:100vh">
<v-container fill-height>
<v-layout column&g
浏览 21提问于2019-04-20得票数 2
回答已采纳
2回答
验证数据表未显示数据
、、、、
验证数据表没有显示数据，显示1行中有1行显示，但表体为空。我的组件代码：
<template>
<v-data-table
:headers="headers"
:items="desserts"
>
</v-data-table>
</template>
<script>
export default {
name: 'Users',
data () {
return {
headers: [
{
浏览 3提问于2019-07-24得票数 12
回答已采纳
在Vuetify数据表中，当头长时，排序箭头出现在标头下面。我试图使标题中的排序箭头始终显示在与标头相同的行上。
这里是我的数据表：
<v-data-table
:headers="headers"[![enter image description here][2]][2]
:items="truncatedRows"
:items-per-page="5"
class="elevation-1"
></v-data-table>
我得到了什么：
浏览 8提问于2019-11-01得票数 9
回答已采纳
我有过
<v-data-table
v-model="selected"
item-key="userNumber"
class="fixed-table-users"
:search="search"
hide-default-footer
hide-default-header
single-select
:items="users"
:headers="headers"
浏览 11提问于2022-08-30得票数 0
回答已采纳
如何同时展开此数据表中的所有/VueJS数据表条目，而不仅仅是一个？
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
item-key="name"
expand
>
<template slot="items" s
浏览 1提问于2018-07-04得票数 6
回答已采纳
我正在尝试向v-data-table组件添加一个sum行，并维护对该组件的排序。我尝试了两种方法，但都不是最优解决方案。 方法1)在挂载表并获取数据后，将数据总和的另一行推入表中。 如下所示： let total = 0
this.data.forEach(d => {
total += d.someValue
})
this.data.push({
value: total
}) 这在表上具有所需的结果，您可以使用条件类绑定来加粗最后一行。此方法的问题是，排序时，sum行的移动方式与其他行相同。这并不是最优的。样式是完美的，也正是我想要的，但是排序把一切都搞乱了。 方法2)
浏览 30提问于2019-12-10得票数 0
回答已采纳
我在使用v-select和v-data-table时遇到了一些奇怪的行为。问题在于，当为v-data-table中的每一行呈现时，模型绑定保留了给定的v-select组件的选择。不清楚我使用输入绑定的方式是否不适合Vuetify (v-select绑定存储在一个对象中，通过表中每一行的ID作为关键字)，或者这是否是v-select组件的合法缺陷。
这个问题似乎只有在v-select组件上启用了multiple功能时才会发生，并由以下代码演示：
可以通过为其中一行选择一个选项，然后尝试更改排序顺序(例如，按名称)来进行演示。使用单项选择v-select的表使用适当的行重新排序和维护选择，但多项选
浏览 3提问于2018-06-28得票数 2
我需要更改vuetify v-data-table的行字体颜色。 我从后端收到一组行，每行都有一个名为"color_status“的列。 我已经创建了一个模板来做这件事。但是，问题是在执行时，它会显示所有字段。 我只想显示标题的字段。 有没有简单的方法呢？ <v-data-table
:headers="headers"
:items="fila"
:options.sync="options"
:server-items-length="total"
浏览 26提问于2020-05-03得票数 0
我的v-data-table行中有一个删除行的按钮。我正在使用一个典型的拼接，它从数组中删除行，表行被删除，只是弹出，下面的行跳起来。
markApproved(index, invoice) {
this.invoices.splice(index, 1);
}
我想让Vuetify淡出行，并平滑地向上滑动剩余的行。如何使用Vuetify转换来实现这一点？
浏览 0提问于2019-12-05得票数 0
1回答
我有一个从API获取数据的v-data-table。我希望使行可以单击，如果用户单击一行，它将打开另一条路由并显示该行的完整数据。如何在v-data-table中实现这一点
模板
<v-data-table
:headers="headers"
:items="visitors"
:search="search"
class="elevation-1"
>
数据
data() {
return {
visitors: []
}
浏览 1提问于2022-02-24得票数 0
回答已采纳
1回答
我试着取代这句话：
# forward-socks5 / 127.0.0.1:9050 .
有了这个：
forward-socks5 / 127.0.0.1:9050 .
这一行属于一个配置文件，必须从一开始就删除#符号，从而启用(UN-注释)，我想不出比用另一行替换行更好的方法了。
任何其他的想法或方式都是非常有用的。
顺便说一句，文本前面的空格也在那里。
我把文本贴在原来的文件里了。
提前感谢
编辑：
我以某种方式成功地完成了行添加和删除，使用了我找到的两段代码。我唯一的问题是，下面的代码删除了
浏览 3提问于2012-11-04得票数 4
回答已采纳
我使用的是一个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
回答已采纳
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
我正在尝试根据表中一个字段的值在v-数据表中着色一行。-我已经尝试了这里和其他地方提供的所有解决方案，并尝试了更多的解决方案。，我正在运行当前版本的Vuetify (2.3.9)，我已经重新加载了所有内容，清除了浏览器缓存和cookies等等。<代码>H19</代码>我尝试过使用插槽和不使用插槽。<code>H 210</code><code>H 111</code>我的应用程序包装在v-app<code>H 212/code><>f 213/code>>f 213</cod
浏览 3提问于2020-08-20得票数 1
如何在cursor: pointer行上设置<v-data-table>？
我在组件中尝试了下面的代码，但是它没有被识别：
<style lang="css" scoped>
tr:hover {
cursor: pointer;
}
</style>
浏览 4提问于2020-05-13得票数 7
回答已采纳
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
我想在v-data-table中显示一行的缩略图。
这是我的json数据：
"images": {
"thumbnail": {
"url": "post1.jpg"
},
"original": {
"url": "post1.jpg"
}
}
我试着像这样显示图像：
<v-data-table :he
浏览 1提问于2020-09-05得票数 0
我想在v-data-table中弹出选定的行，这样我就可以突出显示select row。实际上，我在v-data-table中执行编辑功能，如图所示 ? 。这里有人能帮我解决这个问题吗？很可能是与CSS相关的。我精通VueJs，但不太精通CSS
浏览 63提问于2021-02-04得票数 1
Vuetify v-data-table组件在表格底部有一个每页行的选择框，问题是它不是html中的选择框，所以我在使用Cypress测试选项更改时遇到了很多麻烦，我已经知道了这段代码：
cy.get('#app > div.v-application--wrap > main > div > div > div > div > div.container > div > div > div.pa-5.v-card.v-sheet.theme--light > form > div:nth-child(10) &g
浏览 6提问于2021-05-31得票数 1
回答已采纳
5回答
我有一张桌子 <v-data-table
:headers="headers"
:items="bookings"
class="elevation-1"
:search="search"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.date }}</td>
<td>{{ props.item.time }}</td
浏览 45提问于2019-02-04得票数 15
回答已采纳
我有一个v-data-table，其中一个列是v-select数据存储在vuex中，我使用vuex-map-fields检索/更新
UI是(简化)
<v-data-table
:items="data"
>
<template v-slot:item.type="{ item }">
<v-select
v-model="?"
:items="types"
item-text="description"
/>
<
浏览 12提问于2022-07-31得票数 0
2回答
环境：
vue@^2.6.10:
vuetify@^2.1.0
我希望使用v-data-table来显示搜索结果，并在v-data-table的每一行中添加计算按钮。
不幸的是，我有两个问题：
求值按钮没有显示我不知道如何获取按下按钮的行数据
我需要改变什么？
模板
<v-data-table
:headers="headers"
:items="search_result"
>
<template slot="items" slot-scope=&
浏览 4提问于2019-11-28得票数 11
回答已采纳
是否可以对数据表中的特定行应用不同的样式？
这是我的代码：
<v-data-table
:headers="headers"
:items="items"
v-model="selected"
:search="search"
:no-data-text="mensagem"
select-all
:rows-per-page-text="linhasPorPag
浏览 14提问于2018-05-02得票数 15
我试图在一个v-data-table中显示我在Firebase中的所有用户，但是所有的行都显示在一行中。 <v-data-table
:headers="headers"
:items="users"
:loading="loading"
class="elevation-1"
:no-data-text="$t('admin.usersTable.empty')"
>
<template slot="item" s
浏览 18提问于2019-09-11得票数 1
1回答
如果我点击v-data-table中的一行，我想要显示一个对话框。此外，我在这个表中有一列，它也有一个我想要使用的按钮。 如果我单击此按钮，单击该行，则该按钮已注册。这两个函数都会执行。有没有办法不执行行上的点击？ <v-data-table :headers="headers" :items="items" @click:row="openRecipe">
<template v-slot:item.actions="{ item }">
<v-icon
small
浏览 21提问于2020-03-18得票数 3
回答已采纳
你好，我使用vuetify来通过<v-data-table>和<v-pagination>实现分页，我想知道为什么:在从后端请求数据时使用服务器项长度支柱。在此之前，我使用v数据表中的@page-count和pageCount作为v-分页的支柱来实现它。我很好奇这两种方法之间的区别，以及使用服务器项长度的优点。
在此之前
<v-data-table
:headers="headers"
:items="items"
:search="search"
:items-pe
浏览 14提问于2022-03-24得票数 0
2回答
目标
我想要一个v-data-table是可编辑的，看上去“不错”。
问题所在
添加一个v-text-field以使其可编辑，还会将行高提高到非常令人不快的程度。
原始意见：
具有v-文本字段输入
怪诞
如何减少行高，使之类似于没有v-text-fields的行高。
作为一种奖励
因为我对整个前端发展这类事情都很陌生，我该如何去找出导致这个“身高问题”的原因呢？
PS:我试着添加了一个JSFiddle，但我甚至不知道如何正确地显示v-data-table .
基本草案可以找到
浏览 0提问于2021-02-26得票数 0
好的，我有一个v-data-table，它有一个列，有条件地显示checkmark图标或x图标：
<v-data-table :headers="headers" :items="items" item-key="id">
<template v-slot:headers="props">
<tr>
<th v-for="header in props.headers" :key="header.text"&g
浏览 0提问于2019-05-30得票数 2
1回答
如何为表行添加颜色
、、、、
这是我的餐桌。 -模板 <v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
</v-data-table> -脚本 headers: [
{
text: 'Campaign Id',
align: 'start',
浏览 14提问于2021-01-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
