设置“选择所有项目”-PrimeVue Multiselect 的文本

Question

PrimeVue 允许您向多选添加标题。 然后它会显示在复选框上方以选择所有项目。

CSS 解决方案是这样的

div.customClassName .p-multiselect-header .p-checkbox::after {
  content: "Select all Items";
}

但这看起来不够好。

有没有办法为“全选”复选框显示漂亮的标签？

Answer 1

可能有点晚了，但可能会对将来的人有所帮助。

我面临着同样的问题，我想出了一个很好的解决方法。

Primevue 组件支持模板化，因此您可以添加自定义标头

<MultiSelect 
    v-model="selectedItems" 
    :options="items" 
    optionLabel="name" 
    optionValue="id" 
    ref="selectAll"> // notice ref
    // add custom header with custom style and click event
        <template #header>
           <div class="absolute cursor-pointer top-3 left-10" @click="toggleSelectAll">Select All Items</div>
        </template>
</Multiselect> 


toggleSelectAll() {
  // check all selected then remove all selected items
  if (this.$refs.selectAll.allSelected) {
    this.selectedItems = [];
    return;
  }

  // else add all items
  this.selectedItems = [1,2];
}

Answer 2

我有 Kamran 提出的完全相同的解决方案，直到我注意到该解决方案可能无法与其他 Primevue 主题一起正常工作。

这是我为了解决这个问题而想出的办法：

• 完全删除了标题模板
• 添加样式：

   .p-multiselect-header {
           position: relative;
           .p-checkbox::after {
               position: absolute;
               content: 'Select all';
               left: 30px;
               width: 110px;
           }
       }