1

如何在自定义文本时从 v-select 添加复选框而不覆盖multiple.

<v-select
v-model="selectedRepoImage"
:items="repoImages"
item-text="fulltag"
item-value="repo_image_id"
multiple>
       <template v-slot:selection="{ item, index }">
                    <template v-slot:selection="{ item, index }">
                        <v-chip v-if="index === 0">
                            <span>{{item.fulltag}}</span>
                        </v-chip>
                        <span
                        v-if="index === 1"
                        class="grey--text caption"
                        >(+{{ selectedRepoImage.length - 1}} others)</span>
                   </template>
       </template>
       <template v-slot:item="{ item }">
        //checkboxes ??
        //item.name  ??
       </template>
</v-select>
4

2 回答 2

3

这很简单，看看我的截图：

我可以将它应用到你的代码中，如果你不让它自己工作的话。

        <template v-slot:item="{item, attrs, on}">
          <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
            <v-list-item-action>
              <v-checkbox :ripple="false" :input-value="active"></v-checkbox>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>
                <v-row no-gutters align="center">
                  {{ item.name }} {{ item.service.name }}
                </v-row>
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </template>
于 2021-07-08T20:28:23.623 回答
-1

这个 Vuetify 文本字段示例有一个复选框

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" 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.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-card>
          <v-card-text>
            <v-row align="center">
              <v-checkbox
                v-model="includeFiles"
                hide-details
                class="shrink mr-2 mt-0"
              ></v-checkbox>
              <v-text-field label="Include files"></v-text-field>
            </v-row>
            <v-row align="center">
              <v-checkbox
                v-model="enabled"
                hide-details
                class="shrink mr-2 mt-0"
              ></v-checkbox>
              <v-text-field
                :disabled="!enabled"
                label="I only work if you check the box"
              ></v-text-field>
            </v-row>
          </v-card-text>
        </v-card>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
      includeFiles: true,
      enabled: false,
    }),
    })
  </script>
</body>
</html>

于 2021-02-17T22:29:54.883 回答