0

早上好！

我有一个列出设备的页面，我想单击要重定向到另一个列出功能的页面的项目，直到这一点起作用。但是，执行此操作时，设备列表页面上的某些功能无法正常工作。例如，编辑名称。

在此处输入图像描述

按照图像更好地了解我想要做什么。

谢谢

<v-data-table :headers="headers" :items="devices" item-key="uid" disable-pagination hide-default-footer>

        <template v-slot:item.online="{ item }">
            <v-icon color="success" v-if="item.online">check_circle</v-icon>
            <v-tooltip bottom v-else>
                <template #activator="{ on }">
                    <v-icon v-on="on">check_circle</v-icon>
                </template>
                <span>last seen {{ item.last_seen | moment("from", "now") }}</span>
            </v-tooltip>
        </template>

       <template v-slot:item.uid="{ item }">
            <v-chip>
                {{ item.uid }}
                <v-icon small right @click.stop v-clipboard="item.uid" v-clipboard:success="showCopySnack">mdi-content-copy</v-icon>
            </v-chip>
        </template>

        <template v-slot:item.name="{ item }">
            <v-edit-dialog :return-value="editName" large @open="editName = item.name" @save="save(item)">
                <v-text-field slot="input" v-model="editName" label="Edit" single-line>
                </v-text-field>
                <v-icon small left>mdi-file-edit</v-icon>
                {{ item.name }}
            </v-edit-dialog>
        </template>

在 v-data-table ...中，我想在单击行重定向到另一个页面时使用类似 @click: row = "featureDevice" 的内容（当我单击该行时会发生这种情况）。当我输入@click: row = "featureDevice" 时，名称编辑功能和操作被“禁用”，因为@click 覆盖了行上的任何操作。

我想保留编辑名称和操作的操作。

4

1 回答 1

0

您可以click按列使用事件。

请参见以下示例：

<template>
  <v-app>
    <v-content class="pa-3">
      <v-data-table :headers="headers" :items="items">
        <template v-slot:item.id="{ item }">
          <div style="cursor: pointer" @click.stop="pushOtherPage">{{ item.id }}</div>
        </template>
      </v-data-table>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    items: [
      { id: 1, name: 'Option 1' },
      { id: 2, name: 'Option 2' },
      { id: 3, name: 'Option 3' },
    ],
    headers: [
      { text: 'Id', value: 'id' },
      { text: 'Name', value: 'name' },
    ],
  }),
  methods: {
    pushOtherPage() {
      console.log('click in Id column');
      this.$router.push({ name: 'other-page' });
    },
  },
};
</script>

如果单击列名称，则不会调度任何事件。但是，如果您单击 Id 列，页面将被重定向。

于 2020-02-26T18:41:51.513 回答