vue js- multi select:全选/取消全选

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

中选择全部并取消选择所有功能。

这是问题陈述/要求:

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

当我键入111时,vue multi select将仅显示:

1112,1115

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

selectedArray = [1112,1115]

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

6667,6668和6669

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

selectedArray = [1112,6669]

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

selectedArray = [6667,6669]

同样,当我搜索11时,我会显示多重选择

1112,1144。

此处1112、1113、1115处于选择状态,而1199、1144处于取消选择状态。 现在,当我单击全选[可能是复选框或可单击的文本]时,我需要选择其余的取消选择的项目。 因此使

selectedArray = [1112,1144]。

查询:

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

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

iCMS 回答:vue js- multi select:全选/取消全选

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

类似这样:

  1. @input并设置过滤器并设置group-属性
  2. 使用计算属性filteredArray代替MainArray,在此方法中,您将构建一个组列表,其值与过滤条件匹配,如果未设置过滤器,则返回原始数组
  3. 单击所述过滤器组以选择/取消选择所有子项
本文链接:https://www.f2er.com/2139592.html

大家都在问