ElementUI Select multiple 功能增强

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2188 天前的主题，其中的信息可能已经有所发展或是发生改变。

在对ElementUI Select组件使用的过程中发现 multiple 模式不是很好用

作为查询框

禁止更改大小影响其他布局
支持全选 /全部不选即使是在 filterable 情况下

现在初步改为如下形式

这种会比之前的好点吗

还是有其他更好的想法

第 1 条附言 · 2018-12-29 09:51:00 +08:00

大概的业务需求就是：
下拉框里会有非常多的选项
会有选择带有关键字的所有选项的情况这就是为什么要加一个带筛选的全选
而不仅仅是针对全部选项的多选
现在是我能想到的最好的办法了
去查了别的框架的多选也没有能给我更好灵感的交互
所以过来问问啦

11 条回复 • 2018-12-28 19:38:37 +08:00

mokeyjay

2018-12-27 14:37:52 +08:00

加减号不太美观
加号可以用回车替代，减号建议去掉容易误操作

maplelin

2018-12-27 15:05:51 +08:00

只有我感觉一个下拉菜单加个+-中间放个输入框怪怪的吗

Fairy1128

2018-12-27 16:13:05 +08:00

@mokeyjay 那么减号的操作怎么实现比较好呢

Fairy1128

2018-12-27 16:13:41 +08:00

@maplelin 所以想问问有没有更美观也更实用的方式

9ki

2018-12-27 20:04:27 +08:00

这种复杂多选适合弹个框搞, 楼主自己 demo 也能看出来选中多个与 "奶" 相关的物品后压根不知道究竟选了什么, 这已经不是一个 selector 能搞定的场景了

fyyz

2018-12-28 09:44:35 +08:00

应该在 combo 的弹出框里输入 [牛] 的时候，combo list 里和 [牛] 有关的选项置顶，置顶同时，选中项保持高亮，非选中项保持不高亮。

Fairy1128

2018-12-28 09:48:11 +08:00

@9ki 选择的就是过滤输入框输入“奶”后下拉框里筛选出的所有 option

Fairy1128

2018-12-28 09:49:34 +08:00

@fyyz 这样我也想过但是置顶很多个感觉像没置顶就放弃了

fyyz

2018-12-28 09:55:26 +08:00

@Fairy1128 https://www.iviewui.com/components/auto-complete 可以参考下这个

9ki

2018-12-28 18:02:23 +08:00

@Fairy1128 从我角度看像是个伪需求... 建议楼主把实际业务也加上讨论一下

guyskk0x0

2018-12-28 19:38:37 +08:00 via Android

加减号可以合并成一个，放在输入框后面，三种状态：
1. [√] 点击变全不选
2. [*] 点击变全选
3. [ ] 点击变全选