我有来自API的20-25个名称，需要在下拉框中显示它们（要求）。我在这里使用Vue v-自动完成来显示字段中的选定名称。我使用了名为Select All的自定义项，用户可以在其中选择下拉列表中的所有名称，但是当用户点击Select All时，我还需要做的是，我不想显示包括Select All Chip在内的Autocomplete字段中的所有名称，只有没有Select All的单独选择的项目才应该显示为Chips。
这是我到目前为止尝试过的代码沙箱。我是Vue js的新手，所以我希望能得到一些关于控制v-自动完成芯片的想法。
v-autocomplete sandbox
1条答案
按热度按时间u91tlkcl1#
除了在名称数组中包含“全选”之外，您还可以使用前置项目插槽来包含单独的"全选“复选框。
如果您需要区分通过单击选择的名称和通过Select All复选框选择的名称，您可能需要在names数组中添加一个新属性来跟踪这一点，例如，如果选择了一种方式，则布尔值为true，如果选择了另一种方式，则布尔值为false。
您还需要一个类似于选择的插槽来自定义筹码的显示，您可以使用
v-if根据新的布尔属性有条件地渲染筹码。我相信这个codesandbox非常接近你想要的