vue实现点击全选

实现全选功能的基本思路

在Vue中实现全选功能通常需要以下步骤：绑定全选复选框的状态到数据属性，监听全选复选框的变化事件，根据全选状态更新所有子项的选中状态。

数据准备

创建一个包含全选状态和子项列表的数据结构：

data() {
  return {
    selectAll: false,
    items: [
      { id: 1, name: 'Item 1', selected: false },
      { id: 2, name: 'Item 2', selected: false },
      { id: 3, name: 'Item 3', selected: false }
    ]
  }
}

全选逻辑实现

添加全选方法处理全选状态变化：

methods: {
  toggleSelectAll() {
    this.items.forEach(item => {
      item.selected = this.selectAll
    })
  }
}

模板绑定

在模板中绑定全选复选框和子项复选框：

<div>
  <label>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
    全选
  </label>

  <div v-for="item in items" :key="item.id">
    <label>
      <input type="checkbox" v-model="item.selected">
      {{ item.name }}
    </label>
  </div>
</div>

子项变化时更新全选状态

添加计算属性或watch来监测子项变化：

watch: {
  items: {
    handler(newVal) {
      this.selectAll = newVal.every(item => item.selected)
    },
    deep: true
  }
}

完整组件示例

<template>
  <div>
    <label>
      <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
      全选
    </label>

    <div v-for="item in items" :key="item.id">
      <label>
        <input type="checkbox" v-model="item.selected">
        {{ item.name }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectAll: false,
      items: [
        { id: 1, name: 'Item 1', selected: false },
        { id: 2, name: 'Item 2', selected: false },
        { id: 3, name: 'Item 3', selected: false }
      ]
    }
  },
  methods: {
    toggleSelectAll() {
      this.items.forEach(item => {
        item.selected = this.selectAll
      })
    }
  },
  watch: {
    items: {
      handler(newVal) {
        this.selectAll = newVal.every(item => item.selected)
      },
      deep: true
    }
  }
}
</script>

使用计算属性替代watch

也可以使用计算属性来实现更简洁的代码：

computed: {
  selectAll: {
    get() {
      return this.items.every(item => item.selected)
    },
    set(value) {
      this.items.forEach(item => {
        item.selected = value
      })
    }
  }
}

这种情况下可以简化模板，移除@change事件：

<input type="checkbox" v-model="selectAll">

性能考虑

对于大型列表，使用deep watch可能会影响性能。在这种情况下，可以考虑使用计算属性或手动触发更新逻辑。