如何从 Vuetify 数据表选定的行中提取数据 [英] How to pull data from a Vuetify Datatable selected row

问题描述

我有一个 Vuetify 数据表

I have a Vuetify Datatable

             <v-data-table
                :headers="headers"
                :items="members"
                item-key="id"
                v-model="selected"
                :search="search"
              >
                <template slot="items" slot-scope="props">
                  <tr :active="props.selected" @click="select(props.item)">
                    <td>{{ props.item.name }}</td>
                    <td class="text-xs-right">{{ props.item.FirstName}}</td>
                    <td class="text-xs-right">{{ props.item.LastName }}</td>
                    <td class="text-xs-right">{{ props.item.email }}</td>
                    <td class="text-xs-right">{{ props.item.department}}</td>
                    <td class="text-xs-right">{{ props.item.division}}</td>
                  </tr>
                </template>

当我选择一行时，我希望能够在同一页面上使用一些数据填充项目，例如 v-card 中的姓名和电子邮件.我目前有{{msg}}

And when I select a row I want to be able to populate an Item on the same page with some of the data such as the name and email in a v-card. I currently have {{msg}}

在我的脚本中我有

         return {
         msg: "",

然后

       select(selectedItem) {
  this.selected = [];
  this.members.forEach(item => {
    if (item.id == selectedItem.id) {
      this.selected.push(item);
      this.msg = selectedItem.FirstName;
    }
  });
},

我需要在 msg 中输入姓名.我觉得我要走很长的路来获取我的数据，并且想知道是否有人有更好的解决方案.感谢您的支持.

I need to put name into the msg. I feel that I'm going the long way around to get my data and was wondering if someone has a better solution. Thanks for the support.

推荐答案

由于数据表和this.selected有绑定，所以只需要填充msg 作为组件的计算属性.您不需要通过监听 click 事件手动添加到 this.selected.

Since there is a binding between the data table and this.selected, you only need to populate msg as a computed property of the component. You don't need to manually add to this.selected by listening to the click event.

computed: {
  msg() {
    const selectedRow = this.selected[0];
      return selectedRow ? `${selectedRow.firstName} ${selectedRow.lastName}` : "no data selected";
  }
}

编辑

我添加了一个最小的例子.注意 v-data-table 的 item-key 属性，你应该使用唯一值.

EDIT

I've added a minimal example. Note for the item-key prop of v-data-table, you should use unique values.

<template>
<v-card>
  <v-card-text>
    <v-data-table :headers="headers" :items="members" v-model="selected" item-key="id">
      <template slot="items" slot-scope="props">
        <td>
          <v-checkbox
            v-model="props.selected"
            :disabled="!props.selected && selected.length != 0"
            :indeterminate="!props.selected && selected.length != 0"
          ></v-checkbox>
        </td>
        <td>{{ props.item.firstName}}</td>
        <td>{{ props.item.lastName }}</td>
      </template>
    </v-data-table>
  {{ msg }}
  </v-card-text>
</v-card>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: "Select", value: "id", sortable: false },
        { text: "First Name", value: "firstName", sortable: true },
        { text: "Last Name", value: "lastName", sortable: true }
      ],
      selected: [],
      members: [
        {
          id: 1,
          firstName: "a",
          lastName: "b"
        },
        {
          id: 2,
          firstName: "x",
          lastName: "y"
        }
      ]
    };
  },

  computed: {
    msg() {
      const selectedRow = this.selected[0];
      return selectedRow ? `${selectedRow.firstName} ${selectedRow.lastName}` : "no data selected";
    }
  }
};
</script>

这篇关于如何从 Vuetify 数据表选定的行中提取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！