如何在 v-data-table Vue.js + Vuetify 中显示和隐藏行

Posted 2023-02-22

【中文标题】如何在 v-data-table Vue.js + Vuetify 中显示和隐藏行

【英文标题】：How to show and hide rows in v-data-table Vue.js + Vuetify

【发布时间】：2019-07-08 16:48:11

【问题描述】：

我是 Vue 开发人员的新手，我使用 vue-resource 制作了一个使用 JSON 的 V-Data-Table。这已经完成了，但现在我想根据用户选择显示/隐藏子行。

例如：点击“+”，表格显示行，点击“-”，表格隐藏行。

<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>

有什么办法吗？

【问题讨论】：

请展示你到目前为止所做的尝试

请添加您的代码或准备一个小提琴，以便我们更好地了解您的问题并帮助您。

我正在上传我的代码到 fiddle，1 分钟。

jsfiddle.net/MateusFernando/bej5o0r3/2

【参考方案1】：

如果我理解正确，希望对您有所帮助，您也可以在此处查看一个工作示例：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>

【讨论】：

差不多了！我想始终显示父行，只隐藏子行。

另外，我的 json 中没有显示“值”，我无法向其中发布任何值，只有 GET 可用。

我被困在这个问题上。我将“显示”和“值”放在 Json 中，但仍然无法正确隐藏/显示。有什么想法吗？

太棒了！但是，我的 Json 中没有 ID 字段...没有 ID 阵营有什么办法吗？

您好，有什么帮助吗？