javascript - Vue.js - 如何访问子组件的计算属性(Vuetify 数据表)
问题描述
我是 vue.js 和 vuetify 的新手。我用 Vuetify 数据表组件创建了一个表。该表在第一列中有复选框,在标题的第一列中有一个“全选”复选框。该表可使用数据表组件的内置搜索功能进行搜索。这是问题所在:
当搜索后过滤表格并单击“全选”复选框时,将检查所有行,即使是当前未显示的行。不应检查当前未显示的行。为了解决这个问题,我想使用数据表组件的内置计算属性“filteredItems”。但是在互联网上搜索了几个小时后,我找不到解决方案。我可以在不修改数据表组件本身(可能发出事件)的情况下执行此操作吗?
在 Vue.js Chrome 开发工具中,我可以看到我需要的值:
这是我的代码:
数据表:
<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" height="2" 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()
}
提前致谢!
解决方案
我认为你可以ref
在这个上使用 a :
<v-data-table
...
ref="myTable"
><v-data-table>
methods: {
toggleAll () {
console.log(this.$refs['myTable'].filteredItems)
}
}