如何在具有多个选项和项目槽的 Vuetify 自动完成菜单中显示复选框？

Question

如何在具有多个选项和项目槽的 Vuetify 自动完成菜单中显示复选框？ 我使用项目槽的原因是我想在项目上添加工具提示，但此后删除了复选框

        <v-autocomplete
          v-if="attribute.guiDataType === 'dropdown'"
          :ref="`${attribute.attribute}_ct`"
          :no-data-text="$t('filter.NoData')"
          :label="attribute.label"
          :items="attribute.concepts"
          :value="selected[attribute.attribute]"
          :return-object="false"
          item-value="id"
          item-color="secondary"
          class="mx-4"
          multiple
          clearable
          data-test="dropdown-filter"
          :disabled="filtersLoading"
          @change="selectItem($event, attribute.attribute)"
        >
          <template #item="{ item }">
            <shortened-text-with-tooltip :text="item.label" />
          </template>
<v-autocomplete>

Answer 1

使用

item

插槽时，您必须自己添加复选框，并从插槽属性传递必要的数据。使用列表项组件进行正确的格式化。

查看示例片段：

const ShortenedTextWithTooltip = {
  props: ['text', 'disabled', 'ripple', 'isSelected'],
  template: `
    <v-tooltip attach>
      <template v-slot:activator="{ on, attrs }" >
        <v-list-item v-on="on" v-bind="attrs">
          <v-list-item-action>
            <v-simple-checkbox
              v-on="$listeners"
              :disabled="disabled"
              :value="isSelected"
              :ripple="ripple"
            />
          </v-list-item-action>
          <v-list-item-content>
            {{text}}
          </v-list-item-content>
        </v-list-item>
      </template>
      <span>Tooltip for {{text}}</span>
    </v-tooltip>
  `
}

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  components: {
    ShortenedTextWithTooltip
  },
  template: `
    <v-app>
      <v-main>
        <v-container>
          Values: {{value}}
          <v-autocomplete
            no-data-text="$t('filter.NoData')"
            label="Concept"
            :items="concepts"
            v-model="value"
            item-value="id"
            item-text="label"
            item-color="secondary"
            class="mx-4"
            multiple
            clearable
          >
            <template #item="{ item, on, attrs: {disabled, inputValue, ripple} }">
              <shortened-text-with-tooltip
                :text="item.label"
                v-on="on"
                :disabled="disabled"
                :isSelected="inputValue"
                :ripple="ripple"
              />
            </template>
          </v-autocomplete>
        </v-container>
      </v-main>
    </v-app>
  `,
  data() {
    return {
      value: [],
      concepts: Array.from({
        length: 10
      }, (_, i) => ({
        id: i,
        label: 'Concept ' + i
      })),
    }
  }
})

<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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>