vuetify.js - 使用 Vuetify 2 的父 v-data-table 中可扩展子组件的问题

Question

我从 1.5 升级到 Vuetify 2。除了一件事，一切都很顺利。我有一个带有 v-data-table 的父组件，我想传递数据并使用子组件扩展每一行。

ScanGrid（父组件）：

<template>
  <v-container>
    <v-card>
      <v-card-text>
        <v-layout row align-center>
          <v-data-table
            :headers="headers"
            :items="items"
            :hide-default-footer="true"
            item-key="id"
          >
            <template slot="items" slot-scope="props">
              <tr @click="props.expanded = !props.expanded">
                <td>{{ props.item.name }}</td>
                <td class="text-xs-left large-column">
                  {{ props.item.scanned }}
                </td>
                <td class="text-xs-left large-column">
                  {{ props.item.incoming }}
                </td>
                <td class="text-xs-left large-column">
                  {{ props.item.outgoing }}
                </td>
                <td class="text-xs-left large-column">
                  {{ props.item.unknown }}
                </td>
              </tr>
            </template>
            <template slot="expand" slot-scope="props">
              <ScanGridChild :value="props.item"></ScanGridChild>
            </template>
          </v-data-table>
        </v-layout>
      </v-card-text>
    </v-card>
  </v-container>
</template>

ScanGridChild（子组件）：

<template>
  <v-card>
    <v-card-text>{{ value }}</v-card-text>
  </v-card>
</template>

<script>
export default {
  name: "ScanGridChildComponent",
  props: {
    value: {
      Type: Object,
      Required: true
    }
  },
  computed: {},
  watch: {
    props: function(newVal, oldVal) {
      console.log("Prop changed: ", newVal, " | was: ", oldVal);
      this.render();
    }
  }
};
</script>

<style></style>

它在 Vuetify 1.5.19 中运行良好。我正在使用 Vuetify 2.1.6 并使用单文件组件。谢谢。

标签： vuetify.js

Answer 1

Vuetify 2.x 对许多组件进行了重大更改，将 slot-scopes 替换为 v-slot，并且在 vuetify 数据表中添加了许多新的属性和插槽

这是与上述代码复制相同功能的工作代码笔

https://codepen.io/chansv/pen/BaaWbKR?editors=1010

你需要确保你有 vue js 2.x 和 vuetify 2.x

父组件代码：

<template>
      <v-container>
        <v-card>
          <v-card-text>
            <v-layout row align-center>
              <v-data-table
                 :headers="headers"
                 :items="items"
                 item-key="name"
                 single-expand
                 :expanded="expanded"
                 hide-default-footer
                 @click:row="clickedRow"
               >
               <template v-slot:expanded-item="{ item }">
                 <td :colspan="headers.length">
                    <ScanGridChild :value="item"></ScanGridChild>
                 </td>
               </template>
             </v-data-table>
           </v-layout>
          </v-card-text>
        </v-card>
      </v-container>
    </template>


    <script>
    export default {
    ...
    data () {
        return {
        expanded: [],
        headers: [
          {
            text: "Localisation",
            sortable: true,
            value: "name"
          },
          {
            text: "Paquets scannés",
            sortable: true,
            value: "scanned"
          },
          {
            text: "Paquets entrants",
            sortable: true,
            value: "incoming"
          },
          {
            text: "Paquets sortants",
            sortable: true,
            value: "outgoing"
          },
          {
            text: "Paquets inconnus",
            sortable: true,
            value: "unknown"
          }
        ],
          items: [
          {
            id: 1,
            name: "Location 1",
            scanned: 159,
            incoming: 6,
            outgoing: 24,
            unknown: 4,
            test: "Test 1"
          },
          {
            id: 2,
            name: "Location 2",
            scanned: 45,
            incoming: 6,
            outgoing: 24,
            unknown: 4,
            test: "Test 2"
          }
        ],
        }
      },
      methods: {
        clickedRow(value) {
  if (this.expanded.length && this.expanded[0].id == value.id) {
    this.expanded = [];
  } else {
    this.expanded = [];
    this.expanded.push(value);
  }
}
      }
    ...
    }
    </script>

在子组件中

代替

props: {
    value: {
      Type: Object,
      Required: true
    }
  },

with( 类型和必需更改为小写类型和必需)

props: {
    value: {
      type: Object,
      required: true
    }
  },