时间戳

首页 > 解决方案 > Vuetify Datatable - 仅在第一行渲染元素

vue.js - Vuetify Datatable - 仅在第一行渲染元素

问题描述

我的一个 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.jsvuetify.js

解决方案

您可以为数组中的项目引入一个布尔属性，我们称之为它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" ....>

编解码器

推荐阅读