首页 文章

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

提问于
浏览
2

我是vue.js和vuetify的新手 . 我创建了一个包含Vuetify Data Tables组件的表 . 该表在第一列中有复选框,在 Headers 的第一列中有一个“全选”复选框 . 该表可以使用Data Tables组件的内置搜索功能进行搜索 . 这是问题所在:

在搜索后过滤表并单击“全部检查”复选框时,将检查所有行,甚至是当前未显示的行 . 目前不应检查未显示的行 . 要解决此问题,我想使用数据表组件的内置计算属性“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" 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()
  }

提前致谢!

1 回答

  • 1

    我想你可以在这个上使用 ref

    <v-data-table
        ...
        ref="myTable"
    ><v-data-table>
    
    methods: {
        toggleAll () {
            console.log(this.$refs['myTable'].filteredItems)
        }
    }
    

相关问题