【17】下拉列表实现可多选与模糊查询

收藏

本帖最后由 Ellia.Duan 于 2025-3-21 10:11 编辑

下拉列表实现可多选，可输入选择

Wilson.Zhang · Wilson.Zhang

您好！目前SpreadJS支持的可多选的下拉列表需要通过Style设置，在Style的dropDowsn属性对象中为options属性设置multiSelect属性值为true，即可令其可支持多选，如下图所示：
1741231483319.png799087524.png

可以参考官网列表教程了解详情：
列表
1741231540559.png561859740.png

guhaiye · guhaiye

怎么实现输入选择呢

guhaiye · guhaiye

Wilson.Zhang 发表于 2025-3-6 11:27
您好！目前SpreadJS支持的可多选的下拉列表需要通过Style设置，在Style的dropDowsn属性对象中为options属性 ...

怎么实现可输入选择呢

Wilson.Zhang · Wilson.Zhang

guhaiye 发表于 2025-3-6 11:29
怎么实现可输入选择呢

也支持在单元格中直接输入，您说的“输入选择”是根据输入的内容进行模糊搜索或者精准搜索吗？

guhaiye · guhaiye

Wilson.Zhang 发表于 2025-3-6 13:45
也支持在单元格中直接输入，您说的“输入选择”是根据输入的内容进行模糊搜索或者精准搜索吗？

是的，下拉多选支持输入模糊匹配

Wilson.Zhang · Wilson.Zhang

guhaiye 发表于 2025-3-6 14:00
是的，下拉多选支持输入模糊匹配

这需要您自定义实现，依然使用现在的下拉多选列表，自定义模糊搜索逻辑在单元格中输入时根据输入的内容从下拉列表中搜索，将搜索结果显示在自定义对话框中，令对话框的显示位置紧邻单元格。

整体思路如上，实现时需要小心的细节较多。您可以评估下。

Wilson.Zhang · Wilson.Zhang

您好！请教下您的需求实现的怎么样了？

guhaiye · guhaiye

Wilson.Zhang 发表于 2025-3-11 09:53
您好！请教下您的需求实现的怎么样了？

麻烦您这边给个demo吧？

Wilson.Zhang · Wilson.Zhang

本帖最后由 Wilson.Zhang 于 2025-3-13 18:01 编辑

guhaiye 发表于 2025-3-13 14:36
麻烦您这边给个demo吧？

多选下拉列表加模糊搜索不太复杂，但是要实现为单元格比较复杂。我也没有现成的demo。

提供一种新思路：点击单元格后弹出对话框，其中显示多选下拉列表，如果使用element-ui组件库中的Select选择器，可以兼具模糊搜索和多选，待完成选择后，点击对话框中的“确定”按钮，将选项同步填充至单元格中。

您可以参考如下链接中的demo，其中的输入框便支持搜索：
点击单元格弹出弹框输入后同步至单元格

		自动登录	找回密码
密码			立即注册

[已处理] 【17】下拉列表实现可多选与模糊查询

9 个回复