Vuetify Datatable - 仅在第一行渲染元素答案

【问题标题】：Vuetify Datatable - Rendering element on first row onlyVuetify Datatable - 仅在第一行渲染元素
【发布时间】：2020-05-12 19:58:17
【问题描述】：

我的一个 vue 项目有问题。我有一个 vuetify 数据表，它使用 mongo 从 .net 核心后端接收数据。它工作得很好，每一行都有一个编辑和删除按钮。但在这种情况下，我需要将编辑和删除按钮限制为仅显示在数据表的第一行。

我已经尝试了很多来自互联网的解决方案，但到目前为止没有一个对我有用。

这里分别是数据表和按钮的代码：

 <v-data-table
        :headers="headers"
        :items="pacientes"
        :search="search"
        :page.sync="page"
        :items-per-page="itemsPerPage"
        hide-default-footer
        sort-by="status"
        class="elevation-1"
        @page-count="pageCount = $event"
      >
<template
          v-slot:item.edit="{ item }" >
          <v-btn
            color="blue"
            tile
            x-large
            icon
            @click="aprovar(item.nomePaciente, item.idEspera, item.matricula)"
          >
            <v-icon>mdi-pencil-circle</v-icon>
          </v-btn>
        </template>
        <template
          v-slot:item.delete="{ item }"
        >
          <v-btn
            color="red"
            x-large
            tile
            icon
            @click="abrirModalDeletar(item.nomePaciente, item.idEspera)">
            <v-icon>mdi-delete-circle</v-icon>
          </v-btn>
        </template>

任何帮助将不胜感激，谢谢！

【问题讨论】：

您是否需要可编辑特定项目，或者它是否可以是恰好位于表格第一行的任何项目？后者比较棘手，因为表格排序会移动项目。
它将永远是表格的第一项

标签： vue.js vuetify.js

【解决方案1】：

您可以为数组中的项目引入一个布尔属性，我们称之为isFirst 然后您可以在数据表中监听current-items 的事件，它返回当前视图中的项目。在此基础上，显示第一行的按钮。所以我建议如下：

<v-data-table @current-items="setFirst" ...... >

以及功能：

methods: {
  setFirst: function(currItems) {
    // first check that actually exists values
    if (currItems.length) {
      // toggle all to false
      currItems.forEach(x => x.isFirst = false)
      // just set first to true
      currItems[0].isFirst = true;
    }
  }
},

然后为按钮设置v-if：

<v-btn v-if="item.isFirst" ....>

CODEPEN

【讨论】：

【解决方案2】：

如果您的对象有一个 ID 并且您知道该 ID 是什么，您可以为您的编辑和删除按钮设置 v-if 语句，以便仅在 ID 等于该值时呈现。像这样的：

        <template
          v-slot:item.edit="{ item }" >
          <v-btn
            color="blue"
            tile
            v-if="item.id===1"
            x-large
            icon
            @click="aprovar(item.nomePaciente, item.idEspera, item.matricula)"
          >
            <v-icon>mdi-pencil-circle</v-icon>
          </v-btn>
        </template>
        <template
          v-slot:item.delete="{ item }"
        >
          <v-btn
            color="red"
            x-large
            tile
            v-if="item.id===1"
            icon
            @click="abrirModalDeletar(item.nomePaciente, item.idEspera)">
            <v-icon>mdi-delete-circle</v-icon>
          </v-btn>
        </template>

如果您的项目没有 ID，则在获取数据时，您可以通过编程方式为第一个项目设置一个属性，然后对该属性使用 v-if 语句。

类似：

fetchData().then(items => {
  if (items.length >= 1) {
    items[0].showEditDelete = true
  } 
})

那么您的 v-if 语句将类似于 v-if=item.showEditDelete。

【讨论】：