Как показать и скрыть строки в v-data-таблице Vue.js + Vuetify - PullRequest
Новая
       38

Как показать и скрыть строки в v-data-таблице Vue.js + Vuetify

0 голосов
/ 14 февраля 2019

Я новичок в Vue Developer и создаю V-Data-Table, использующую JSON с vue-resource.Это уже сделано, но теперь я хочу показать / скрыть дочерние строки на основе выбора пользователя.

Например: нажмите «+», и в таблице появятся строки, нажмите «-», и таблица скроет строки. 

<template>
  <v-app>
    <div>
      <v-flex xs12 sm6 d-flex>
        <v-select
          v-if="retornoDoJson"
          :items="retornoDoJson.nations"
          v-model="paisSelecionado"
          label="Selecione Um"
          v-on:change="selectionChanged"
          single-line
          menu-props="bottom"
        ></v-select>
      </v-flex>
    </div>
    <div v-if="paisSelecionado">
      <v-data-table :headers="headers" :items="retornoDoJson.top_10s[paisSelecionado]" hide-actions>
        <template slot="items" slot-scope="props">
            <v-btn fab dark color="indigo">
                <v-icon dark>add</v-icon>
            </v-btn>
            <td class="parent-row">{{ props.item.name }}</td>
            <td class="child-row">{{ props.item.club }}</td>
            <td class="child-row">{{ props.item.phy }}</td>
            <td class="parent-row">{{ props.item.age }}</td>
            <td class="parent-row">{{ props.item.pas }}</td>
            <td class="child-row">{{ props.item.nationality }}</td>
        </template>
      </v-data-table>
    </div>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      paisSelecionado:undefined,
      headers: [
        {
            text: ' ',
            align: 'left',
            sortable: false,
            value: 'name'
        },
        { text: 'name', value: 'name' },
        { text: 'club', value: 'club' },
        { text: 'phy', value: 'phy' },
        { text: 'age', value: 'age' },
        { text: 'pas', value: 'pas' },
        { text: 'nationality', value: 'nationality' }

      ],
      retornoDoJson: []
    };
  },
  methods: {
    loadApi() {
      this.$http
        .get("http://localhost:8080/data.json")
        .then(this.successCallback, this.errorCallback);
    },
    successCallback: function(resposta) {
        this.retornoDoJson = resposta.data;
        console.log(this.retornoDoJson);
    },
    selectionChanged: function() { 
      console.log("selecionarItem:this.selecionarPais:", this.paisSelecionado); 
    }
  },
  mounted() {
    this.loadApi();
  }
};
</script>

<style>

</style>

Есть ли способ сделать это?

1 Ответ

0 голосов
/ 15 февраля 2019

Если я вас правильно понял, надеюсь, это поможет, также вы можете проверить рабочий пример здесь: https://codepen.io/anon/pen/zemZoB

<template slot="items" scope="props">
    <template v-if="props.item.show">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">
        <v-btn @click.native="props.item.show = false">
          Hide
        </v-btn>
      </td>
    </template>
    <template v-else>
        <v-btn @click.native="props.item.show = true">
          Show
        </v-btn>
    </template>
</template>
...