如何在 vuetify select 中添加自定义按钮答案

【问题标题】：How to add a custom button in vuetify select如何在 vuetify select 中添加自定义按钮
【发布时间】：2020-05-02 11:40:25
【问题描述】：

我有一个场景，比如我必须列出几百个类别，并且必须在选择框中显示它们。由于列表很大，所以在后端实现了skip和limit，因此它将类别限制为20s。我的情况就像当用户看到前 20 个类别时，最后，我必须添加一些按钮，说明“加载更多”这样当用户单击它时，他们可以看到接下来的 20 个类别。但我不知道如何在 vuetify 选择中添加按钮。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    fruits: [
      'Item 1',
      'Item 2',
      'Item 3',
      'Item 4'
    ],
    selectedFruits: [],
  }),

  computed: {
    likesAllFruit () {
      return this.selectedFruits.length === this.fruits.length
    },
    likesSomeFruit () {
      return this.selectedFruits.length > 0 && !this.likesAllFruit
    },
    icon () {
      if (this.likesAllFruit) return 'mdi-close-box'
      if (this.likesSomeFruit) return 'mdi-minus-box'
      return 'mdi-checkbox-blank-outline'
    },
  },

  methods: {
    toggle () {
      this.$nextTick(() => {
        if (this.likesAllFruit) {
          this.selectedFruits = []
        } else {
          this.selectedFruits = this.fruits.slice()
        }
      })
    },
    loadMore () {
      console.log('load more ...')
    }
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.26/dist/vuetify.min.css" rel="stylesheet">

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


<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-select
        v-model="selectedFruits"
        :items="fruits"
        label="Favorite Fruits"
        multiple
      >
        <template v-slot:prepend-item>
          <v-list-item
            ripple
            @click="toggle"
          >
            <v-list-item-action>
              <v-icon :color="selectedFruits.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Select All</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-divider class="mt-2"></v-divider>
        </template>
        <template v-slot:append-item>
          <v-divider class="mb-2"></v-divider>

          <v-btn color="primary" @click="loadMore">
            Click me for load more items.
          </v-btn>
        </template>
      </v-select>
    </v-container>
  </v-app>
</div>

【讨论】：