vue.js - vue js-多选：全选/取消全选

Question

我需要在 vue multiselect https://vue-multiselect.js.org/中选择全部并取消选择所有功能

这是问题陈述/要求：

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

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

1112,1113,1115

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

selectedArray=[1112,1113,1115]

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

6667、6668 和 6669

现在我需要选择所有这三个项目，从而使

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

现在我再次搜索 111 多选 vue 将显示 1112,1113,1115。现在我需要取消选择所有从而使

selectedArray=[6667,6668,6669]

当我再次搜索 11 时，我会显示 vue 多选

1112,1113,1115,1199,1144。

这里 1112,1113,1115 处于选中状态，1199,1144 处于取消选中状态。现在，当我单击全选[可能是复选框或可单击文本]时，我需要选择剩余的未选中项目。从而使

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

查询：

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

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

Answer 1

现在它非常 hacky，但您可以使用 vue-multiselect 的选项组：optionGroups

所以像：

1. 监听@input并设置过滤器和设置group-属性
2. 使用计算属性filteredArray而不是MainArray，在其中构造一个组的列表，其值与过滤条件匹配，如果没有过滤器集，则返回原始数组
3. 单击所述过滤器组以选择/取消选择所有子项