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。
希望对您有所帮助。
你知道我在哪里可以找到 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。
希望对您有所帮助。