时间戳

首页 > 解决方案 > 单击带有模板行的 v-data-table 中的行

javascript - 单击带有模板行的 v-data-table 中的行

问题描述

当我添加模板行（以便它们根据条件具有特殊格式）时：

  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
    @click:row="clickedHandle"
  >
    <template v-slot:item="props">
      <tr v-if="props.item.name.includes('Fro')">
        <td>{{ props.item.name }}</td>
        <td v-for="itemx in myheaders">{{ toThousands(props.item[itemx]) }}</td>
      </tr>
      <tr v-else>
        <td v-for="itemx in props.item">{{ itemx }}</td>
      </tr>
    </template>
  </v-data-table>

应该在行单击时调用的函数clickedHandle根本不会启动。为什么呢？

这是您可以检查此行为的示例： https ://codesandbox.io/s/vuetify-playground-forked-lro4w?file=/src/layout.vue

该表似乎根本没有对行点击做出反应。

clickedHandle(value) {
  console.log(value);
},

clickedHandle应该在行点击时记录一些值。

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

v-data-table像在行自定义文档中那样单独自定义每个单元格，而不是整行。您可以使用 av-for来动态定位您想要的单元格插槽（与您的myheaders数组一起）：

<template v-for="header in myheaders" v-slot:[`item.${header}`]="props">
  <template v-if="props.item.name.includes('Fro')">
    {{ toThousands(props.item[header]) }}
  </template>
  <template v-else>
    {{ props.item[header] }}
  </template>
</template>

您可以通过在计算中提前准备数据来避免这种槽和过滤器的复杂性。

这是一个更新的CodeSandbox

推荐阅读