Google Data Studio Select 的克隆,选项为“only”

Clone of Google Data Studio Select with option “only”

你知道我在哪里可以找到 Google Data studio 的超级 select 的实现,只有 "Only" 到 select 那个元素吗?

您还可以筛选结果,如果列表很长,非常方便:

这是一个尚未实现的功能。问你想要的功能 HERE.

希望对你有帮助。

有一个 feature request 用于 select-all 功能,显然可以使用名为 prepend-item 的待实现 scoped-slot
所以目前你需要一些解决方法。

更新了 codepen,带有 1.2 版中的 prepend-item 插槽:
https://codepen.io/anon/pen/EdVpmY (必须更多地研究过滤,所以如果有变化我会更新)

注意 prepend-item 也是父 v-list 组件的一部分,因此我们无法轻松地将控件固定到顶部。

<template slot="prepend-item">
  <v-list-tile @click.stop="selected = selectedAll ? [] : states.slice()">
    <v-list-tile-action>
      <v-icon :color="selected.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
    </v-list-tile-action>
    <v-list-tile-title>Select All</v-list-tile-title>
  </v-list-tile>
  <v-divider class="mt-2"></v-divider>
  <v-list-tile class="search-tile">
    <v-text-field v-model="q" prepend-inner-icon="search" class="pt-0"></v-text-field>
  </v-list-tile>
</template>

关于select-only功能,可以使用已经支持的scoped-slot item (see scoped slots in API docs),自己添加select-only按钮:

<v-select v-model="selected"
          multiple
>           
    <template slot="item" slot-scope="data">
        <v-list-tile-content>
            <v-list-tile-title>
                {{ data.item }}
            </v-list-tile-title>
        </v-list-tile-content> 

        <v-list-tile-action class="hidden">
            <v-btn @click.stop="selected = [data.item]">ONLY</v-btn>
        </v-list-tile-action>
    </template>
</v-select>

Codepen,注意也添加了一些CSS。

Expanded codepen select-all 使用 watch 的解决方法,其中一项是 "All"。因此,如果我们想要不带 "All" 的 selected 数组,我们可以在计算 属性 或任何需要的地方做类似 return this.selected.filter(v => v !== "All") 的事情。

据我所知,这是一个自定义组件。你展示的那个很可能是用 angular + material 制作的,就像这个例子:https://stackblitz.com/edit/angular-material-select-multi-c6vtux

所以我认为你可能不再需要像 vue-multiselect 这样的组件,它功能齐全,可能会完成你需要的甚至更多,唯一的问题是你需要工作在上面使用 material 样式。
https://github.com/shentao/vue-multiselect
https://vue-multiselect.js.org

我想,如果您需要更多功能,您可以自定义模板 https://vue-multiselect.js.org/#sub-custom-option-template

现在检查“自定义配置”,您会在其中找到一些示例,这些示例将向您展示您实际上可以通过一些努力来完成类似 "only" 的操作。

这是我找到的最完整的 vuejs 处理多组件的组件select。

希望对您有所帮助。