Vuetify数据表单选模式，选中一行选中其他所有

Question

我正在尝试选择表格中的一行并发出所选项目。

选择一个会选择除第一个遇到的对象以外的所有对象（作为selected 变量）。

你有什么想法，我做错了什么？

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :search="search"
    :loading="loading"
    v-model="selected"
    single-select
    show-select
    :options="{itemsPerPage:5}"
    @item-selected="itemSelected"
  >
    <template v-slot:top>
      <v-toolbar flat>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
      </v-toolbar>
    </template>

    <template v-slot:item.name="{ item }">{{ item.name }}</template>
  </v-data-table>
</template>

<script>
export default {
  name: "variable-selector",
  props: ["variables", "map", "index"],
  data() {
    return {
      search: "",
      selected: {},
      loading: false,
      items: [],
      headers: [{ text: "Variable name", value: "name", sortable: true }]
    };
  },
  methods: {
    itemSelected(selection) {
      if (selection.value) {
        this.$emit("selected", selection.item); // it always emits var_2 object
      } else {
        this.$emit("selected", null);
      }
    },

    updateItemsList(variables) {
      this.items = Array.from(variables);
    }
  },

  mounted() {
    this.updateItemsList(this.variables);
  },

  watch: {
    variables(newValue) {
      this.loading = true;
      this.updateItemsList(newValue);
      this.loading = false;
    }
  }
};
</script>

Answer 1

你的数据应该有主键。如果它做到了，你的桌子就明白了；如果您的数据没有主键，则应为 table 编写 item-key。

祝你好运

Answer 2

如果你遇到错误，每个对象都应该是唯一的键值，你想手动告诉每个对象是唯一的

添加

item-key="table_header_index"//or name 

例如：

<v-data-table
    :headers="headers"
    :items="items"
    show-select
    item-key="table_header_index"  <-------------------add this line
>

</v-data-table>

Answer 3

我遇到了这个问题，我意识到我的 item-key="value" 与我的标头中的任何值都不匹配。选择一个标题值，它应该可以工作。

Answer 4

从docs 中的示例我可以看到以下内容：

1.) selected 应该是一个数组，而不是一个对象

Selected 保存所有选定的值。 single-select 属性只是确定长度是否可以大于 1。

2.) 如果您使用v-model，则不应使用@item-selected="itemSelected"

v-model 已经是 2 路绑定。但是您触发了一个附加事件并使用object 或null 覆盖模型（应该是一个数组）

解决方案

将selected 设为数组并删除@item-selected="itemSelected"。

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :search="search"
    :loading="loading"
    v-model="selected"
    single-select
    show-select
    :options="{itemsPerPage:5}"
  >
    <template v-slot:top>
      <v-toolbar flat>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
      </v-toolbar>
    </template>

    <template v-slot:item.name="{ item }">{{ item.name }}</template>
  </v-data-table>
</template>

<script>
export default {
  name: "variable-selector",
  props: ["variables", "map", "index"],
  data() {
    return {
      search: "",
      selected: [],
      loading: false,
      items: [],
      headers: [{ text: "Variable name", value: "name", sortable: true }]
    };
  },
  methods: {
    updateItemsList(variables) {
      this.items = Array.from(variables);
    }
  },

  mounted() {
    this.updateItemsList(this.variables);
  },

  watch: {
    variables(newValue) {
      this.loading = true;
      this.updateItemsList(newValue);
      this.loading = false;
    }
  }
};
</script>