Vue，编辑 table 中的项目并重定向到另一个页面

Question

早上好！

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

enter image description here

跟随图片可以更好地理解我想要做什么。

谢谢

<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", name edit function and actions 是"disabled", 因为@click 覆盖了行上的任何action.

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

Answer 1

您可以按列使用 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>

如果您单击“名称”列，none 事件将派发。但是，如果您单击 ID 列，页面将被重定向。

Vue，编辑 table 中的项目并重定向到另一个页面

Vue, edit item in the table and redirect to another page

vue.js

vuetify.js

vue-tables-2