Vue全选复选框功能实现问题求助

嘿，我来帮你搞定这个全选功能！咱们一步步来调整代码，实现全选/取消全选，同时保证单个复选框和全选框的状态同步：

第一步：调整全选状态的存储 #

首先，把全局的isCheckAll改成对象，这样如果有多个分类（facet）的话，每个分类都能独立维护自己的全选状态：

data: {
  facets: {},
  isCheckAll: {}, // 键为facet.name，值为布尔值，存储对应分类的全选状态
},

第二步：修改全选框模板 #

给全选框绑定对应分类的状态，同时传递当前分类作为参数给checkAll方法，还要保证id唯一避免冲突：

<!-- 假设外层有v-for="facet in facets"循环 -->
<label class="option-checkbox" :for="`select-all-${facet.name}`">
  <input 
    :id="`select-all-${facet.name}`" 
    class="option-checkbox__input" 
    type="checkbox" 
    @click='checkAll(facet)' 
    v-model='isCheckAll[facet.name]'
  >
  <span class="option-checkbox__text">Select all</span>
  <span class="option-checkbox__icon"></span>
</label>

第三步：完善checkAll方法 #

这个方法要根据全选框的状态，把当前分类下所有选项的标识符加入/移除选中数组：

checkAll(facet) {
  // 确保params中存在当前分类的选中数组
  if (!this.params[facet.name]) {
    Vue.set(this.params, facet.name, []);
  }

  const allIdentifiers = facet.items.map(item => item.identifier);

  if (this.isCheckAll[facet.name]) {
    // 全选：合并已有选中项和所有项，去重避免重复添加
    this.params[facet.name] = [...new Set([...this.params[facet.name], ...allIdentifiers])];
  } else {
    // 取消全选：清空当前分类的选中数组
    this.params[facet.name] = [];
  }
}

第四步：同步单个复选框和全选框的状态 #

我们需要监听选中数组的变化，自动更新全选框的状态：

// 添加判断分类是否全选的方法
isFullySelected(facet) {
  const selectedIds = this.params[facet.name] || [];
  // 只有当分类有选项，且选中数量等于总数量时，才算全选
  return facet.items?.length && selectedIds.length === facet.items.length;
},

// 添加watch监听params变化，自动同步全选状态
watch: {
  params: {
    deep: true,
    immediate: true, // 初始化时也执行一次同步
    handler() {
      Object.values(this.facets).forEach(facet => {
        // 用$set确保响应式更新
        this.$set(this.isCheckAll, facet.name, this.isFullySelected(facet));
      });
    }
  }
}

第五步：修复子组件的状态联动 #

你的option-field子组件需要和父组件的选中数组联动，修改子组件代码：

// option-field组件内部
Vue.component('option-field', {
  props: {
    item: { type: Object, required: true },
    facet: { type: Object, required: true },
    selectedIdentifiers: { type: Array, default: () => [] }
  },
  computed: {
    checked: {
      get() {
        // 从父组件的选中数组判断当前选项是否选中
        return this.selectedIdentifiers.includes(this.item.identifier);
      },
      set(isChecked) {
        // 通知父组件更新选中状态
        this.$emit('toggle-select', this.item, this.facet, isChecked);
      }
    }
  }
});

然后修改父组件中option-field的使用方式，传递必要的props和事件：

<option-field 
  inline-template 
  v-for="(item, i) in facet.items" 
  :key="i + item.name"
  :item="item"
  :facet="facet"
  :selected-identifiers="params[facet.name] || []"
  @toggle-select="toggleSelect"
></option-field>

第六步：简化toggleSelect方法 #

现在可以根据子组件传递的选中状态直接更新数组：

toggleSelect(item, facet, isChecked) {
  const identifier = item.identifier;
  
  // 确保选中数组存在
  if (!this.params[facet.name]) {
    Vue.set(this.params, facet.name, []);
  }

  if (isChecked) {
    // 选中时，不在数组里才添加
    if (!this.params[facet.name].includes(identifier)) {
      this.params[facet.name].push(identifier);
    }
  } else {
    // 取消选中时，从数组移除
    const index = this.params[facet.name].findIndex(el => el === identifier);
    if (index !== -1) {
      this.params[facet.name].splice(index, 1);
    }
  }
}

这样调整后，全选框就能一键选中/取消当前分类下的所有复选框，同时单个复选框的状态变化也会自动同步全选框的状态啦！

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