一次在VuetifyJS / VueJS

时间:2018-07-04 16:28:14

标签: vuetify.js

如何一次扩展此VuetifyJS / VueJS数据表示例的所有条目,并且一次不扩展?

 <div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      hide-actions
      item-key="name"
      expand
    >
      <template slot="items" slot-scope="props">
        <tr @click="props.expanded = !props.expanded">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td> 
        </tr>
      </template>
      <template slot="expand" slot-scope="props">
        <v-card flat>
          <v-card-text>Peek-a-boo!</v-card-text>
        </v-card>
      </template>
    </v-data-table>
  </v-app>
</div>

以下是单个扩展的示例:

  

https://codepen.io/anon/pen/yEWNxE?&editors=101#

4 个答案:

答案 0 :(得分:6)

此功能有一个open-issue,请务必遵循并在解决该问题时得到通知。


@zikeji的

临时解决方案如下:

添加对表的引用:

<v-data-table ref="dTable">

在加载组件时手动扩展行:

mounted() {
    for (let i = 0; i < this.desserts.length; i += 1) {
        const item = this.desserts[i];
        this.$set(this.$refs.dTable.expanded, item.name, true);
    }
},

Codepen

答案 1 :(得分:1)

您应该改为扩展该组件,并这样设置值。

MyVDataTable.vue

<script>

import VDataTable from 'vuetify/src/components/VDataTable'
export default {
    extends: VDataTable,
    props: ['deserts'],
    mounted () {
        for (let i = 0; i < this.desserts.length; i += 1) {
            const item = this.desserts[i];
            this.$set(this.expanded, item.name, true);
        }
    }
}

然后,您将用这个VTable替换它。

答案 2 :(得分:0)

对我来说,上述和其他在Google上找到的解决方案均无法正常工作。所以我创建了另一种方法。

在通常添加@click扩展功能的行中,必须添加自定义指令。

例如v-open

传递你的道具。

 <tr @click="props.expanded = !props.expanded" v-open="props">

然后在组件内部

directives: {
            open: {
                // directive definition
                bind: function (el,binding) {
                    //only the first row
                    if( binding.value.index === 0){
                        binding.value.expanded = true
                    }
                    //or all rows
                    //binding.value.expanded = true
                }
            }
        },

答案 3 :(得分:0)

在Veutify v2.1.13

只需单击一下,即可将数据从expanded复制到desserts

  methods: {
    expandAll: function() {
      console.log("All expanded.");
      this.$data.expanded = this.$data.desserts;
    },
    collapseAll: function() {
      console.log("All collapsed.");
      this.$data.expanded = [];
    }
  },

codepen