<v-data-table>中的模板v-slot在vue 2.0.15中不起作用
<v-data-table>是Vue.js框架中的一个组件，用于展示数据表格。而v-slot是Vue.js 2.6.0版本中引入的一种语法糖，用于定义组件的插槽。
在Vue.js 2.0.15版本中，v-slot语法还未被引入，因此无法在<v-data-table>中使用v-slot来定义插槽。相应地，可以使用旧版的slot语法来定义插槽。
以下是一个示例代码，展示如何在<v-data-table>中使用旧版的slot语法来定义插槽：
<v-data-table>
<template slot="header">
<!-- 表头插槽内容 -->
</template>
<template slot="item" slot-scope="props">
<!-- 表格行插槽内容 -->
</template>
</v-data-table>在上述示例中，通过在<v-data-table>组件内部使用<template>标签，并指定slot属性的值为"header"或"item"，来定义表头和表格行的插槽内容。同时，可以通过slot-scope属性来获取插槽的作用域。
关于<v-data-table>的更多信息和用法，可以参考腾讯云的相关文档和示例代码：
相关·内容
我有一个v-data-table的问题，我想减少行的高度来匹配dense。我尝试为每个模板设置负边距，但它不起作用。我尝试了很多方法，但没有找到任何解决方案。 谢谢！ .cell-height table tbody td, table tbody th {
margin-top: -15%;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<v-data-table
浏览 81提问于2019-08-30得票数 1
1回答
我正在尝试用嵌套的v-data-table组件来测试一个简单的组件。页面在浏览器中正确呈现，但我似乎无法编写一个工作的Jest测试。
问题似乎与我使用的模板有关--这是我直接从文档中提取出来的。
当我用v-slot属性注释掉模板时，测试执行得很好。
People.vue：
<template>
<v-data-table
:headers="headers"
:items="people"
disable-pagination
disable-sort
disable-filtering
hi
浏览 2提问于2020-05-06得票数 5
回答已采纳
Vuetify v-data-table支持几种类型的插槽：v-slot:body、v-slot:item和v-slot:item.<name>。 我们一直在广泛使用v-slot:item.<name>，因为它提供了一种灵活的方式来样式化和处理单个列中的内容，并允许以编程方式更改表头。 我想向我的v-data-table行添加可拖拽功能，并且已经使用Vue.Draggable实现了这一点。 但是，draggable组件需要使用v-data-table v-slot:body，即控制整个表的主体，从而失去v-slot:item.<name>的灵活性。 有没有
浏览 153提问于2021-02-08得票数 0
回答已采纳
我已经制作了一个具有v-data-table的Vue组件。 子组件 <template>
<div>
<v-data-table>
<template v-slot:item.actions="{ item }">
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
浏览 26提问于2021-04-09得票数 0
回答已采纳
4回答
目前，我正在学习Vue和Vuetify，并且遇到了在数据表中对行进行索引的问题。
唯一可以分配行数的方法是，与原始数据数组相比，依赖于indexOf。但在我的例子中，问题在于，当我在表中对数据进行排序时，索引就会相应地中断。我希望它是稳定的，当你对数据排序时，它会重新计算。
在Vue有什么方法可以做到吗？从角度上看，用桌子要容易得多。有一个内置功能。
或者，您可能知道如何到达Vue保存的筛选或排序数据(数组)。
<v-data-table
:headers="headers"
:items="orders"
浏览 4提问于2020-05-26得票数 1
回答已采纳
1回答
我对Eslint在v-slot中使用修饰符有问题
在这个问题中，我尝试遵循nokazn的答案：和vuejs 的lint文档
我在我的.eslintrc.js文件中添加了：
'vue/valid-v-slot': ['error', {
allowModifiers: true,
}],
但我在验证lint文件时遇到了以下错误：
Configuration for rule "vue/valid-v-slot" is invalid:
Value [{"allowModifiers":true}] should NOT
浏览 7提问于2020-11-16得票数 5
多亏了Vue.js ，我才能遍历子组件中所有可用的插槽。现在，我要做的是只呈现--以模板中特定位置上的某个字符串开头的插槽。
不幸的是，它不起作用。我可能忽略了什么东西。
Parent.vue:
<Child>
<template #table--item.person_id="{ value }">
<div class="text-caption">{{ value }}</div>
</template>
</Child>
Child.vue:
<
浏览 1提问于2021-01-18得票数 4
回答已采纳
尝试使用Vuetify的Data-Table根据字段的计算值进行搜索/过滤。您可以随意跳到代码中，为自己键入一些值。例如，我将其设置为可以通过电子邮件地址字段进行搜索；但是，员工姓名和电话记录字段不起作用。
Codepen
VUE：
<div id="app">
<v-app id="inspire">
<v-card>
<header>How can I search by the computed Name and Phone fields?</header>
<
浏览 0提问于2019-11-21得票数 0
我正在尝试创建可重用的模式窗口，应该通过按下v-data-table行上的图标来调用该窗口。此外，每个图标在鼠标悬停时都应该有一个工具提示。 根据vuetify文档，这两个操作都使用了相同的结构：v-slot:activator="{ on }"和v-on="on"。问题是-在Vue/Vuetify中有没有一种方法来合并这个结构并获得所需的行为？ 目前，我找到了一种方法，可以通过添加额外的<a>标签来获得我想要的东西： <template>
<v-data-table :headers="headers" :i
浏览 32提问于2020-03-23得票数 2
回答已采纳
我有一个用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
1回答
我在组件中有一个组件，它使用在一行中有一个输入的，如果输入v-model="row.item.quantidade"为空，我需要禁用一个按钮。但不起作用。
<v-data-table :headers="headersAllStep3" :items="step2" :search="searchAllStep3">
<template v-slot:item="row">
浏览 0提问于2021-01-11得票数 1
回答已采纳
我想要创建一个包含嵌套数据的Vuetify表。问题是v时隙:item似乎不能处理嵌套数据。
这是我的代码：
<v-data-table :headers="headers" :items="desserts">
<template v-slot:item.calories="{ item }">
<td>Slot works: {{ item.calories }}</td>
</template>
<template v-slot:item.nested.ne
浏览 4提问于2020-10-07得票数 3
回答已采纳
1回答
我收到了Vue的警告
组件呈现函数中的无限更新循环
。我正在编写一个单元测试并得到这个警告。我使用Vuetify的数据表来显示数据。我的代码如下：
<template>
<v-data-table
id="permission-table"
v-model="selected"
:headers="headers"
:items="users"
:items-per-page="10"
class="elevation-1"
浏览 3提问于2020-01-13得票数 0
我尝试创建一个v-data-table，这样我就可以添加另一个带按钮的字段，但似乎不起作用。 下面是代码：https://codepen.io/gerak/pen/yLBpqqG 问题是，当我将包https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js改为一个最新版本时：https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.0.15/vuetify.min.js表，忽略标记。 HTML <v-app id="inspire">
&
浏览 41提问于2019-09-06得票数 2
回答已采纳
我有一个带有两个按钮的父组件，我想使用它作为过滤器。子组件在v数据表中调用。
ScanGrid(家长)：
<template>
<v-card class="ma-5" v-else>
<v-flex row xs12 class="pa-3 ml-3">
<div class="mr-3 mt-2">
<h3>Regrouper par :</h3>
</div>
浏览 1提问于2019-10-28得票数 1
回答已采纳
在下面的代码中，testMethod在页面加载时自动调用(无需用户单击名称链接)。您能帮我一下，如何防止自动导航吗？ <v-data-table
:items="testData"
>
<template v-slot:item.name={"item"}>
<a href="testMethod">
{item.name}
</a>
</template>
</v-data-table>
<script>
methods: {
testMethod(i
浏览 32提问于2020-12-21得票数 0
我试图构造一个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
回答已采纳
如何使用v-for访问Vue实例数据
问题:表标题2下未显示数据
<v-data-table
:headers="headers"
:items="tabular.table" :hide-actions="true"
class="elevation-1"
>
<template v-slot:items="props" v-for="(table, index) in tabular.table" >
浏览 1提问于2019-04-08得票数 0
回答已采纳
1回答
如何使用Vue.js将表中的值相乘？给出了100 g产品的宏值。当我输入200克时，我希望值加倍，即318千卡，12脂肪，48碳水化合物，8蛋白质，2%铁。当我输入50g: 79.6千卡，3脂肪，12碳水化合物，2蛋白质，0.5铁等。
演示代码
HTML:
<div id="app">
<v-app id="inspire">
<v-data-table :headers="headers" :items="desserts" :items-per-page="5" cl
浏览 1提问于2021-03-19得票数 2
回答已采纳
1回答
我有两个嵌套的Vue JS组件：'States - Parent' => 'admin-data-table - Child'。
在子组件中有一个按钮，当单击时，该按钮会将事件发送回父组件：
子组件-管理-数据表：
<template>
<v-data-table :ref="modelName + 'Table'" :value="selectedList" @input="$emit('update:selectedList', $event)"
浏览 1提问于2019-07-02得票数 3
回答已采纳
在我的vue组件中，我使用了vuetify table。它工作正常，但我需要使点击“类别名称”栏中的项目重定向到显示所单击项目的详细信息的vue视图(我需要将项目id转发到显示项目详细信息的视图)。我不知道该怎么做？ 在方法'editItem‘我也需要重定向到其他页面，用转发的id，我也不知道该怎么做？ 我尝试将"Category name“项目设置为超链接，但它不起作用，而且没有id： <template v-slot:item.categoryName="{ item }">
<a :href="this.$router.
浏览 50提问于2021-07-30得票数 0
回答已采纳
2回答
我使用Vuetify为Vue 2创建了一个数据表，并使用了主题。我可以通过在headers数组中设置一个类来更改标题列的背景色。但是，特殊的"Select All“列不起作用。你知道我需要做什么吗？我尝试使用槽来覆盖复选框，但它复制了"th“元素。我需要覆盖整个标题行吗？
模板：
<v-data-table
dense
:headers="headers"
:items="jobs"
item-key="name"
loading-text="Loading..."
浏览 0提问于2020-07-30得票数 1
1回答
在v-data-table的body部分中，Vuetify放置项目，它将所有行包装在tbody标记中。我的槽模板由多行组成，我需要对所有行进行分组，以便应用过渡或其他效果。
如何让v-data-table停止将body包装在tbody标签中，从而产生嵌套的tbody标签？
<v-data-table
ref="dataTable"
:headers="headers"
fixed-header
:height="height"
:items="invoices"
item-
浏览 4提问于2020-05-06得票数 1
验证版: all
Vue版本: 2.6.11
复制的步骤
- Do a scroll and linear progress value will overlap FAT
预期行为
- Linear progress value must not overlap headers
复制链路
<v-data-table
fixed-header
height="70vh"
:headers="headers"
:items="desserts"
:search="search"
浏览 1提问于2020-07-13得票数 0
回答已采纳
4回答
我有一个数据集，我正在对其进行迭代，以便在v-data-table中显示某些字段。如何才能在图标字段的值为G时显示某个图标。如果它有F，就会出现一个不同的图标，如果它有GF，那么两个图标会出现在同一行中。 这是一个示例pen。 new Vue({
el: '#app',
data() {
return {
headers: [{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
浏览 64提问于2020-01-11得票数 0
回答已采纳
Vuetify.js数据表组件具有内置的排序功能，但它根据模型中的数据而不是显示给客户端的文本进行排序。
在下面的示例中，“age”的原始值(例如'EIGHTEEN_TO_TWENTY')被转换成更易读的格式(例如'18-20')。但由于Vuetify按模型排序，它对18 < 15 < 21进行排序，而不是15<18<21。有没有办法按计算/显示的值排序？
Vue.use(Vuetify);
vue = new Vue({
el: '#main',
data: {
members: [{
浏览 13提问于2019-03-19得票数 2
回答已采纳
4回答
嘿，我对vue js和vuetify.In我的editProductSave还不熟悉，我想传递另一个变量，即表中行的索引。这是我当前的代码，我将如何实现？该表使用vuetify v-data表绘制。
全码
<template>
<v-card>
<v-data-table
:headers="tableFields"
:items="programs"
:items-per-page="5">
浏览 4提问于2021-06-14得票数 0
回答已采纳
1回答
我在vuetify数据表上找到了未命中的函数。我认为我的配置是正确的。 这是我的数据表证明 <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line
hide-details></v-text-field>
浏览 7提问于2021-06-21得票数 0
回答已采纳
我正在尝试创建一个可重用的表组件，该组件利用Vuetify的v-data-table组件来分组常见的方面，如搜索栏、表操作(刷新、创建等)。还有我所有的桌子都会有的其他功能。但是，我遇到了在表组件中实现动态的、限定作用域的槽以说明自定义列的问题。想象一下列，比如操作、格式化的ISO字符串等等。
下面是我目前正在尝试的一个简单的例子。在本例中，我将数组customColumns作为支柱传递给CustomDataTable.vue。customColumns有一个具有两个属性的元素。slotName属性指定要在父组件中引用的槽的名称。itemValue属性指定CustomDataTable.vue
浏览 4提问于2020-04-29得票数 4
回答已采纳
我有一个典型的Vue数据表，其中有一个模板部分，如果找不到任何记录，就会显示警报。问题是，这会立即显示，甚至在我的Axios方法有机会出去获取记录之前。
如何在实际数据加载之前防止红色警告消息的闪存？
<template>
<div>
<v-card>
<v-card-title>
<h1>Locations</h1>
</v-card-title>
<v-data-table :headers="headers" :ite
浏览 2提问于2019-05-29得票数 1
回答已采纳
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
回答已采纳
我创建了一个想要添加标签的用户列表。我使用数据表来显示它们，使用芯片来添加或删除标签的组合框。当我添加/删除标记时，如何将用户信息传递给调用的方法？下面是我的代码：
<v-data-table :headers="headers" :items="usersInfos" :search="search" :items-per-page="-1">
<template v-slot:[`item.tags`]="{ item }">
<v-combobox v-m
浏览 0提问于2021-10-28得票数 1
1回答
你好，谢谢你阅读我的问题！我正在使用Vue.js、Vuetify和v-data-table，我正在努力使我的v-槽使用两个不同的字符串作为标题的名称。
<template>
<v-container fluid>
<v-data-table
:options="data"
:headers="headers"
:items="data
:server-items-length="40"
:loading="loading"
浏览 4提问于2021-04-12得票数 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
回答已采纳
1回答
动态覆盖模板槽
、、、
从belongsTo()关系中从Laravel获取一些头部配置。答复如下：
我的配置是这样的：
<v-data-table
:headers="newHeaders"
:items="products"
item-key="name"
>
<template v-slot:header.stocks.0.pivot.quantity="{ header }">
{{ head
浏览 1提问于2020-04-25得票数 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
回答已采纳
我有一个简单的V数据表。我正在尝试为表中的每一行添加复选框。
我的桌子是这样的。
<v-data-table :headers="headers" :items="rows"item-key="name" :search="search">
<template v-slot:item="props">
<tr >
<td v-for="(prop, key) in props.item" :key="k
浏览 14提问于2020-05-27得票数 2
1回答
screenshot我正在尝试在vuetify表中显示数据(通过axios从api获取)。如截图所示，已经加载了23个没有数据的空行。 <template>
<v-data-table
:headers="headers"
:items="info"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.items.bugnum }}</td>
浏览 7提问于2020-01-19得票数 0
回答已采纳
我有一个Vue应用程序，它正在使用Vuetify。由于某些原因，当绑定值更改时，v-chip组件不会重新呈现。
<v-data-table>
<template v-slot:item.active="{ item }">
<v-edit-dialog :return-value.sync="item.active">
<v-chip :key="item.active" outlined :color="item.active ? 'success' :
浏览 0提问于2020-10-09得票数 0
回答已采纳
下面是数据表的，其中的行按类别分组。我想通过单击组标题来展开/折叠它。尝试使用v-slot:item替换行的默认呈现，但似乎不起作用。
第二种方法是使用v-slot:group替换分组行的默认呈现，但我希望应该是另一种方法。
代码如下：
<v-data-table
dense
:headers="headers"
:items="desserts"
item-key=name
group-by="category"
class="elevation-1"
浏览 4提问于2019-09-15得票数 2
1回答
我将v-data-table作为它自己的组件，以使它对我的组件更通用。我想有一个选项，以提供该组件如何在表格中的每个项目的格式。这将通过一个插槽来完成。但问题是，提供的插槽有一个用于v-data-table的插槽。看这个例子，这很难解释。 在我的DataTable组件中，我有： <v-data-table
:headers="tableHeaders"
:items="items"
:item-key="itemKey"
:loading="isLoa
浏览 19提问于2020-10-23得票数 0
我想要做一个可重用的数据表组件，从Vuetify。某些列可以包含v-slot以修改该列中的数据。例如:我将用户角色存储为整数，并希望它们显示为user或adminin the table. Currently I do this with thisv-slot`：
<template v-slot:item.role="{item} ">
{{ (item.role === 1) ? 'Administrator' : 'User' }}
</template>
因为这不是每个数据表的用例，所以我想从使用数据表
浏览 5提问于2020-01-06得票数 3
回答已采纳
1回答
我正在尝试创建基于vuetify的v菜单组件的自定义组件。
此菜单应从vuetify的对话框中调用两次：
，按对话框内容顶部的"Add row“按钮，按v-data-table组件的每一行的”编辑“图标按钮。
在这两种情况下都应该出现相同的菜单。主要区别在于用于调用菜单的组件--在第一种情况下，应该是具有某些文本的v，在第二种情况下，应该是带有某些图标的v-v-图标。
根据vue和vuetify文档，我认为我应该重新定义v-slot:activator，，但是我遇到了一些问题:组件总是有一个v时隙:激活器的默认值。
Vue 2.6.11，Vuetify 2.2.3。
我的代码如下所示：
浏览 2提问于2020-01-15得票数 3
回答已采纳
在使用来自vuetify2的v-数据表中的头槽时，正在添加空行。
这是代码库：
Vue.component('pivot-table',{
data:()=>({
pivotData:[["2018",1470,1436,1445,0],["2019",1953,1824,0,0]],
pivotHeaders:[[{"value":"Month","colspan":1},{"value":"JAN",&
浏览 0提问于2019-08-24得票数 1
回答已采纳
当我单击上一步按钮、下一步按钮和rowsPerPage编号时，我想调用一个函数。
当我使用actions-prepend时，可以使用默认的v-data-table分页吗？我试过了，但似乎不起作用。
<template>
<v-data-table
:headers="headers"
:items="alertList"
:pagination.sync="pagination"
:rows-per-page-items="pagination.rowsPerPageItems"
浏览 0提问于2019-06-14得票数 1
1回答
这是我第一次在vue.js中处理数据表，所以我从api中提取了teams.id，并将其设置为数据表中每一行的唯一键。我的问题是我在向“delete”函数传递密钥时遇到了麻烦。我能够获取索引，但我无法找到获取所述行的键的方法。 <v-data-table
:headers="headers"
:items="teams"
:key="teams.id"
sort-by="id"
class="elevation-1"
>
<template v-slot:item.actions="{
浏览 13提问于2020-04-01得票数 0
回答已采纳
1回答
我在我的v-data-table应用程序中有一个Vuetify的Vue.js。
该表有一列计算值。
我想让那个专栏变得可分类。
我该怎么做？
我试过的是：
我正在研究的排序函数。
它提供：sort?: (a: any, b: any) => number。
但是，当我为列定义该函数时，列中的值仍未排序。
HTML：
<v-data-table
:headers='headers'
:items='items'
>
<template v-slot:item.complete='{ item }'&g
浏览 10提问于2021-12-09得票数 0
1回答
是否使用外部搜索验证数据表？
、、、、
我有vuetify的v-data-table组件，您可以在默认情况下在其属性中添加一个筛选栏。该表从本地json获取数据，到目前为止一切正常。 当我在这个表的外部有一个组件时，问题就来了，这是一个用(v-form / v-text-field)创建的搜索栏，该栏必须与v-data-table的搜索栏执行相同的功能。 如何让这些组件相互通信，并与默认的v-data-table提供的组件一样工作？ 如果你需要示例代码，我会试着做一个总结示例。 更新 我已经清理了代码，以便它更清晰。 组件A- CardList.vue <template>
<v-container>
浏览 18提问于2021-09-20得票数 0
回答已采纳
我正在尝试获取数组索引 serverList: [
{
server: "server.com",
status: "-",
id: 0,
},
{
server: "help.server.org",
status: "16",
浏览 87提问于2019-08-22得票数 0
我使用的是Vuetify目前的CRUD t (与Vue.js2兼容)，并试图使用JavaScript中的以下静态数据计算产品的小计:将产品的数量与价格相乘：
HTML:
<template>
<v-layout align-start>
<v-flex>
<v-container grid-list-sm class="pa-4 white">
<v-layout row wrap>
<v-fl
浏览 6提问于2020-06-16得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
