vue js- multi select : Select All / deselect All

Question

我需要在 vue multiselect https://vue-multiselect.js.org/

中拥有 select all 和 deselect 所有功能

这里是问题 statement/requirement:

MainArray=[1112,1113,1115,6667,6668,6669,1199,1144]

当我输入 111 时，vue multi select 将只显示：

1112,1113,1115

现在我需要一个 select 所有这三个项目的选项，并且需要将这些项目添加到

selectedArray=[1112,1113,1115]

当我再次输入 66 vue multi select 时会显示

6667,6668 和 6669

现在我需要 select 所有这三项，因此

selectedArray =[1112,1113,1115,6667,6668,6669]

现在我再次搜索111 multiselect vue会显示1112,1113,1115。现在我需要 deselect all 从而使

selectedArray=[6667,6668,6669]

再次搜索11时，vue multiselect会显示

1112,1113,1115,1199,1144。

这里1112,1113,1115处于selected状态，1199,1144处于deselect状态。 现在，当我单击 select 全部 [可能是一个复选框或可单击的文本] 时，我需要 select 剩余的 deselect 项。 从而使

selectedArray=[1112,1113,1115,6667,6668,6669,1199,1144].

查询：

1. 我可以为此选择的最佳控件是什么Select全部/Deselect全部？复选框/可点击文本?

2. 实现此功能的最佳解决方案？

Answer 1

现在它很老套，但你可以利用 vue-multiselect 的选项组：optionGroups

所以像这样：

1. 监听 @input 并设置过滤器并设置 group- 属性
2. 使用计算 属性 filteredArray 而不是 MainArray，在其中构造一个组列表，其中的值与过滤条件匹配，如果没有过滤器集， return原数组
3. 单击所述过滤器组 select/deselect 全部 children