vue实现全选指令

实现全选指令的方法

在Vue中实现全选功能可以通过自定义指令或组件方法完成。以下是两种常见的实现方式：

自定义指令实现

Vue.directive('select-all', {
  bind(el, binding, vnode) {
    const checkboxGroup = binding.value;
    el.addEventListener('change', (event) => {
      checkboxGroup.forEach(item => {
        item.checked = event.target.checked;
      });
    });
  }
});

使用方式：

<input type="checkbox" v-select-all="checkboxes">
<div v-for="item in items">
  <input type="checkbox" v-model="item.checked">
</div>

组件方法实现

methods: {
  toggleAll(event) {
    this.items.forEach(item => {
      item.checked = event.target.checked;
    });
  }
}

模板部分：

<input type="checkbox" @change="toggleAll">
<div v-for="item in items">
  <input type="checkbox" v-model="item.checked">
</div>

双向绑定优化版

computed: {
  allChecked: {
    get() {
      return this.items.every(item => item.checked);
    },
    set(value) {
      this.items.forEach(item => {
        item.checked = value;
      });
    }
  }
}

模板部分：

<input type="checkbox" v-model="allChecked">
<div v-for="item in items">
  <input type="checkbox" v-model="item.checked">
</div>

带部分选中状态

computed: {
  allChecked: {
    get() {
      const checkedCount = this.items.filter(item => item.checked).length;
      return checkedCount === this.items.length ? true :
             checkedCount > 0 ? null : false;
    },
    set(value) {
      this.items.forEach(item => {
        item.checked = value;
      });
    }
  }
}

模板部分需要根据状态显示不同样式：

<input 
  type="checkbox" 
  v-model="allChecked"
  :indeterminate="allChecked === null">

每种方法适用于不同场景，自定义指令适合全局复用，组件方法适合简单场景，计算属性方案提供了最灵活的控制方式。