Vue.js - 如何访问子组件的计算属性（Vuetify 数据表）

Posted 2023-02-23

【中文标题】Vue.js - 如何访问子组件的计算属性（Vuetify 数据表）

【英文标题】：Vue.js - How to access computed property of Child Component (Vuetify Data Tables)

【发布时间】：2019-02-22 10:41:30

【问题描述】：

我是 vue.js 和 vuetify 的新手。 我用 Vuetify 数据表组件创建了一个表。该表在第一列中有复选框，在标题的第一列中有一个“全选”复选框。 该表可使用数据表组件的内置搜索功能进行搜索。问题来了：

在搜索后过滤表格并单击“全选”复选框时，会检查所有行，包括当前未显示的行。 不应检查当前未显示的行。为了解决这个问题，我想使用数据表组件的内置计算属性“filteredItems”。但是在互联网上搜索了几个小时后，我找不到解决方案。我可以在不修改数据表组件本身（可能发出事件）的情况下执行此操作吗？

在 Vue.js Chrome 开发工具中，我可以看到我需要的值：

Computed property in Vue DEV Tools

这是我的代码：

数据表：

<v-data-table           
        v-model="selected"
        :headers="headers"
        :items="items"
        :search="search"
        :loading="true"
        :pagination.sync="pagination"            
        :rows-per-page-items="[50,100,200]"
        select-all
        item-key="Hostname"            
        class="elevation-1"           
      >
        <template slot="headers" slot-scope="props">
          <tr>
            <th>
              <v-checkbox
                :input-value="props.all"
                :indeterminate="props.indeterminate"
                primary
                hide-details
                @click.native="toggleAll"
              ></v-checkbox>
            </th>
            <th
              v-for="header in props.headers"
              :key="header.text"
              :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
              @click="changeSort(header.value)"
            >
               header.text 
              <v-icon small>arrow_upward</v-icon>                  
            </th>
          </tr>
        </template>
        <v-progress-linear slot="progress" color="blue"  v-show="progress_visibility" v-model="downloadPercentage"></v-progress-linear>
        <template slot="items" slot-scope="props">
          <tr :active="props.selected" @click="props.selected = !props.selected">
            <td>
              <v-checkbox
                :input-value="props.selected"
                primary
                hide-details
              ></v-checkbox>
            </td>
            <td class="text-xs-left"> props.item.Hostname </td>
            <td class="text-xs-left"> props.item.FQDN </td>
            <td class="text-xs-left"> props.item.Subnet </td>
            <td class="text-xs-left"> props.item.MacAdress </td>
            <td class="text-xs-left"> props.item.SWProfile </td>
          </tr>
        </template>            
      </v-data-table>

“检查所有”功能：

methods: 
  toggleAll () 
    if (this.selected.length)
      this.selected = []
    else
      // Here I want to access the computed property "filteredItems" of the data table
      this.selected =  this.items.slice()
  

提前致谢！

【问题讨论】：

嗨，你是如何过滤项目的？您可能还需要为 :filter 提供一个单独的函数。

我使用的是内置函数。我很好。

【参考方案1】：

我认为你可以在这个上使用ref：

<v-data-table
    ...
    ref="myTable"
><v-data-table>

methods: 
    toggleAll () 
        console.log(this.$refs['myTable'].filteredItems)
    

【讨论】：

谢谢！这对我有用。我读到了ref，但不知道如何访问这些属性。

这仍然是最新的吗？我正在用 Vue2.6 和 Vuetify2.1 尝试这个解决方案，但 this.$refs.myTable 没有属性 filteredItems。

不再是最新的......他们还没有很好的解决方案，但现在你可以使用：this.$refs.refname.$children[0].filteredItems