相关疑难解决方法(0)

我使用 av-data-table来管理电子邮件。用户可以单击一行，然后会出现一个包含电子邮件详细信息的弹出窗口。

我想要什么：
我希望在单击这些行后将行标记为“已读”（因此 css 粗体/非粗体）。

问题：
我已经在这里找到了一些示例（但仅适用于较旧的 Vuetify 版本）：Vuetify - How to highlight row on click in v-data-table

这个例子（以及我发现的所有其他例子）使用扩展代码v-data-table- 例如：

<v-data-table :headers="headers" :items="desserts" class="elevation-1">
  <template v-slot:items="props">
    <tr @click="activerow(props.item)" :class="{'primary': props.item.id===selectedId}">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </tr>
  </template>
</v-data-table>

所以扩展代码是：

<template v-slot:items="props">
  <tr @click="activerow(props.item)" :class="{'primary': props.item.id===selectedId}">
    <td>{{ props.item.name }}</td>
    <td class="text-xs-right">{{ props.item.calories }}</td>
    <td class="text-xs-right">{{ props.item.fat }}</td> …

我有一个 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;
    }
  });
},

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

我想知道如何通过单击 Vuetify 数据表中的一行来选择/取消选择一行。如果我可以使用 Shift + 单击或 Shift + 箭头来选择范围，那就更好了，但这是另一个问题。

我尝试更新发送到参数“值”中的数组，但这些行从未在用户界面中被选择。

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    item-key="id"
    class="elevation-1"
    :value="selectedRows"
    @click:row="rowClicked"
  ></v-data-table>
</template>

<script>
export default {
  data() {
    return {
      selected: [],
      selectedRows: [],
      headers: [
        {
          text: "Dessert (100g serving)",
          align: "left",
          sortable: false,
          value: "name"
        },
        { text: "Calories", value: "calories" },
        { text: "Fat (g)", value: "fat" },
        { text: "Carbs (g)", value: "carbs" },
        { text: "Protein (g)", value: "protein" },
        { text: "Iron (%)", value: "iron" } …