如何从 Vuetify Datatable 选定行中提取数据

Question

我有一个 Vuetify 数据表

             <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}}

在我的脚本中我有

         return {
         msg: "",

然后

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

我需要将名字放入消息中。我觉得我要走很长的路来获取我的数据，并且想知道是否有人有更好的解决方案。感谢您的支持。

Answer 1

<v-data-table @click:row="rowClick" item-key="name" single-select ...

methods: {
    rowClick: function (item, row) {      
      row.select(true);
      //item  - selected item
    }
}

<style>
  tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

或

<style scoped>
  /deep/ tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

示例 https://codepen.io/nicolai-nikolai/pen/GRgLpNY

Answer 2

由于数据表和this.selected之间存在绑定，您只需将msg填充为组件的计算属性。您无需通过监听click 事件手动添加到this.selected。

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

编辑

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

<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>