Question

我正在使用带有标题和项目位置的Vuetify数据表。现在我有一个默认情况下应该隐藏的按钮，但是我只想在选择一行或全部选中时显示它。我以为我应该可以使用selected数据属性，但是如果我选择一行，它似乎保持空白。所以不知道如何隐藏/显示按钮。

这是有效的pen。

这是代码：-

new Vue({
  el: "#app",
  data: () => ({
    pagination: {
      sortBy: "name"
    },
    selected: [],
    headers: [{
        text: "Dessert (100g serving)",
        align: "left",
        value: "name"
      },
      {
        text: "Calories",
        value: "calories"
      },
      {
        text: "Fat (g)",
        value: "fat"
      }
    ],
    desserts: [{
        name: "Frozen Yogurt",
        calories: 159,
        fat: 6.0
      },
      {
        name: "Ice cream sandwich",
        calories: 237,
        fat: 9.0
      }
    ]
  }),

  methods: {
    toggleAll() {
      if (this.selected.length) this.selected = [];
      else this.selected = this.desserts.slice();
    },
    changeSort(column) {
      if (this.pagination.sortBy === column) {
        this.pagination.descending = !this.pagination.descending;
      } else {
        this.pagination.sortBy = column;
        this.pagination.descending = false;
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-data-table v-model="selected" :headers="headers" :items="desserts" :pagination.sync="pagination" select-all item-key="name" class="elevation-1">
      <template v-slot:headers="props">
        <tr>
          <th>
            <v-checkbox :input-value="props.all" :indeterminate="props.indeterminate" primary hide-details @click.stop="toggleAll"></v-checkbox>
          </th>
          <th v-for="header in props.headers" :key="header.text" @click="changeSort(header.value)">
            <v-icon small>arrow_upward</v-icon>
            {{ header.text }}
          </th>
        </tr>
      </template>
      <template v-slot:items="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-center">{{ props.item.name }}</td>
          <td class="text-xs-center">{{ props.item.calories }}</td>
          <td class="text-xs-center">{{ props.item.fat }}</td>
        </tr>
      </template>
    </v-data-table>
    <v-container>
      <v-layout>
        <v-flex xs6 class="mt-5">
          <v-btn>Hide by default but show on selected</v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

任何帮助将不胜感激。谢谢。

Answer 1

您可以使用selected.length。

这是您可以添加的计算

  computed: {
    showBtn() {
      return this.selected.length > 0
    }
  },

然后在模板中使用showBtn

<v-btn v-if="showBtn">Hide by default but show on selected</v-btn>

您也可以直接内联使用它，但是我更喜欢使用computed，因为它们缓存值，并使模板更具可读性

new Vue({
  el: "#app",
  data: () => ({
    pagination: {
      sortBy: "name"
    },
    selected: [],
    headers: [
      {
        text: "Dessert (100g serving)",
        align: "left",
        value: "name"
      },
      { text: "Calories", value: "calories" },
      { text: "Fat (g)", value: "fat" }
    ],
    desserts: [
      {
        name: "Frozen Yogurt",
        calories: 159,
        fat: 6.0
      },
      {
        name: "Ice cream sandwich",
        calories: 237,
        fat: 9.0
      }
    ]
  }),
  
  computed: {
    showBtn() {
      return this.selected.length > 0
    }
  },

  methods: {
    toggleAll() {
      if (this.selected.length) this.selected = [];
      else this.selected = this.desserts.slice();
    },
    changeSort(column) {
      if (this.pagination.sortBy === column) {
        this.pagination.descending = !this.pagination.descending;
      } else {
        this.pagination.sortBy = column;
        this.pagination.descending = false;
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>



<div id="app">
  <v-app id="inspire">
    <v-data-table v-model="selected" :headers="headers" :items="desserts" :pagination.sync="pagination" select-all item-key="name" class="elevation-1">
      <template v-slot:headers="props">
        <tr>
          <th>
            <v-checkbox :input-value="props.all" :indeterminate="props.indeterminate" primary hide-details @click.stop="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)">
            <v-icon small>arrow_upward</v-icon>
            {{ header.text }}
          </th>
        </tr>
      </template>
      <template v-slot:items="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-center">{{ props.item.name }}</td>
          <td class="text-xs-center">{{ props.item.calories }}</td>
          <td class="text-xs-center">{{ props.item.fat }}</td>
        </tr>
      </template>
    </v-data-table>
    <v-container>
    <v-container>
      <v-layout>
        <v-flex xs6 class="mt-5">
          <v-btn v-if="showBtn">Hide by default but show on selected</v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

切换隐藏/显示元素VueJS？

1 个答案: