Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select 支持搜索多选的问题 #590

Open
feibinyang opened this issue Dec 18, 2019 · 7 comments
Open

Select 支持搜索多选的问题 #590

feibinyang opened this issue Dec 18, 2019 · 7 comments

Comments

@feibinyang
Copy link
Member

feibinyang commented Dec 18, 2019

有个场景目前没满足,就是带有搜索功能(关键词提交给服务器搜索),然后支持多选。效果图如下(先忽略样式):
image

要支持这个功能,Select组件缺少两个功能,如下:

  • 没有$emit('input')事件到外部,触发不了根据关键词搜索请求

  • 选中项tag显示是基于optionslocalValue字段来的(代码链接),但是options是根据关键词动态变化的,可能会有匹配不上情况。

以上。这个功能看样式、交互像Select组件,不知道在功能划分上属于不?先提issue上来。

@feibinyang
Copy link
Member Author

好像跟这个重复了? #307

@Justineo
Copy link
Member

几个问题:

  1. 如果已选项不在 options 中,无法还原 label

    这个有两个方案:

    a. 选择 value 时,options 中必然有 label,Select 记录下对应的 label/value 对保证后续显示。但是这无法处理表单编辑的场景,因为没有进行搜索就有了初始 value。但无论如何,此时前端必须已经通过后端接口获取了必要的 label/value 对,不然是不可能满足需求的。此时可以通过重写已选项的 scoped slot 来从外部获取 label 展示。
    b. 用 { label, value } 格式作为 Select 的 value,保证选择后 label/value 对始终存在。但也 1. 需要重写 scoped slot 来选择 value.label 用于展示;2. 需要修改 Select 对 value 相等的判断逻辑(===_.isEqual);3. 编辑需求与 a. 有相同问题。

    如果 label/value 相等则简单很多,只传 value 时可以直接 fallback 到 label 用于展示。

  2. 需要将输入框的 input 事件透传出来

  3. 由于筛选 options 的逻辑在服务端完成,所以 match 函数在这里应该不负责筛选选项,而只处理高亮(可能需要新增一个 filter 函数,默认根据 match 结果来筛选结果,也可以覆盖为 option => option 来直接不过滤?)


@xiaodemen @599316527 @feibinyang 你们觉得呢?

@xiaodemen
Copy link
Collaborator

处理高亮也要知道匹配的 offset,所以默认的 match 方法是满足要求的(匹配永远成功并标记上offset)?只要 input 时候更新数据源,加个 loading 状态?

@xiaodemen
Copy link
Collaborator

我觉得 Select 能做的就是把 value 是对象的逻辑做好,比如支持 equalFn自定义逻辑,支持 string(表示字段名,value对象中该字段===则认为相等),支持 [string] (字段名列表,value对象中该字段都===则认为相等),支持 function

@feibinyang
Copy link
Member Author

feibinyang commented Dec 19, 2019

有个情况是:input 输入 ----->options高亮----->使用方基于 input 输入请求服务器数据返回----->更新 options 并高亮,这样感觉上 options 会【跳动】一下,这种要处理么?加 loading 感觉不是很好...

@feibinyang
Copy link
Member Author

feibinyang commented Dec 19, 2019

如果已选项不在 options 中,无法还原 label

这种我感觉组件里确实不用做,只要提供 scoped slot 给业务使用方自己定就好。那 2 个方案也感觉是业务使用方来做的?如果业务方不处理,就 fallback 显示 value

@Justineo
Copy link
Member

input 输入 ----->options高亮

这一步不存在吧,这个时候应该没有 options

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants