javascript - Vuejs & Vuetify：有没有办法用来自 vuetify 的数据表循环模板（使用 v-slot 动态）？

问题描述

我有几个带有服务器端分页、搜索字段和可过滤字段的数据表

但是，我希望能够生成一个组件并使用道具来避免修改相同的东西三次

有没有办法使用 vuetify 中的数据表循环模板（使用 v-slot 动态）？

例如：


<template v-slot:header.id="{ header }">
    <div class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy('id')">
            ID
            <v-icon class="ml-2">{{icon.id}}</v-icon>
        </span>
        <v-text-field v-model="searcher.ticket_id.value" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>


<template v-slot:header.name="{ header }">
    <div class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy('name')">
            Nom du ticket
            <v-icon class="ml-2">{{icon.name}}</v-icon>
        </span>
        <v-text-field v-model="searcher.ticket_name.value" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>

成为（非功能性）：

<template v-for="(item, i) in headers" v-slot:item.text="{ header }">
    <div class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy(item.name)">
            {{item.name}}
            <v-icon class="ml-2">{{icon[item.name]}}</v-icon>
        </span>
        <v-text-field v-model="item.searcher" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>

如果我添加key，我有'<template>' cannot be keyed. Place the key on real elements instead

如果我删除这个我有Elements in iteration expect to have 'v-bind:key' directives

然而，我遇到了几个证明相反的来源

https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

修复：不应在插槽上引发 require-v-for-key

vue-language-server ：迭代中的元素期望有 'v-bind:key' 指令

谢谢

编辑 20/12：

https://github.com/vuejs/eslint-plugin-vue/issues/1006

如何使用 vuetify 数据表动态创建 v-slot 属性？

这是我的代码：

<template v-for="(head, i) in headers" v-slot:header[header.value]="{header}">
    <div :key="i" class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy('id')">
            {{head}} <br> {{header}}
            <v-icon class="ml-2">{{icon.id}}</v-icon>
        </span>
        <v-text-field v-model="searcher.ticket_id.value" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>

不能安装在桌面立柱上

我需要v-slot:header.id="{header}"用于安装在 id 列上，但我必须id根据我的循环进行动态

怎么做？

谢谢

我找到了

我head: 'header.id'在我的列表中添加了，所以我可以使用<template v-for="(head, i) in headers" v-slot:[headers[i].head]="{header}">

标签： javascriptvue.jsvuejs2vuetify.js

javascript - Vuejs & Vuetify：有没有办法用来自 vuetify 的数据表循环模板（使用 v-slot 动态）？

问题描述

解决方案

推荐阅读