如何为PrimeVue Multiselect的全选复选框设置美观标签？

方法一：利用官方Header插槽（推荐） #

PrimeVue的Multiselect组件自带header插槽，直接通过插槽自定义头部内容，能完全控制全选复选框和标签的样式，比CSS伪元素方案灵活得多。

示例模板代码：

<MultiSelect
  v-model="selectedItems"
  :options="items"
  class="custom-multiselect"
>
  <template #header>
    <div class="custom-header">
      <Checkbox v-model="selectAll" @update:model-value="toggleSelectAll" />
      <span class="select-all-label">Select all Items</span>
    </div>
  </template>
</MultiSelect>

配合自定义CSS优化样式：

.custom-header {
  display: flex;
  align-items: center;
  gap: 8px; /* 控制复选框与标签的间距 */
  padding: 8px 12px;
  cursor: pointer;
}

.select-all-label {
  font-size: 14px;
  color: #333;
  user-select: none;
}

/* 可选：添加hover状态增强交互感 */
.custom-header:hover {
  background-color: #f5f5f5;
}

对应的全选逻辑处理：

const selectedItems = ref([]);
const items = ref([/* 你的选项数据 */]);
const selectAll = ref(false);

// 切换全选/取消全选
const toggleSelectAll = (value) => {
  selectedItems.value = value ? [...items.value] : [];
};

// 监听选中项，同步全选复选框状态
watch(selectedItems, (newVal) => {
  selectAll.value = newVal.length === items.value.length;
}, { deep: true });

方法二：优化原有CSS伪元素方案 #

如果不想修改模板结构，可以调整原有CSS代码，提升视觉效果：

div.customClassName .p-multiselect-header .p-checkbox {
  position: relative;
  padding-right: 85px; /* 给标签预留空间 */
}

div.customClassName .p-multiselect-header .p-checkbox::after {
  content: "Select all Items";
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #333;
  pointer-events: none; /* 避免干扰复选框点击 */
  user-select: none;
}

/* 调整头部内边距，防止标签被截断 */
div.customClassName .p-multiselect-header {
  padding: 8px 12px;
}

内容的提问来源于stack exchange，提问作者recklessGreed