vue实现全选

Vue 实现全选功能

在 Vue 中实现全选功能可以通过以下方法完成：

方法一：使用 v-model 绑定数组

1. 在 data 中定义选中项的数组和全选状态

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

2. 创建全选方法

   methods: {
   toggleSelectAll() {
    if (this.selectAll) {
      this.selectedItems = this.items.map(item => item.id)
    } else {
      this.selectedItems = []
    }
   }
   }

3. 模板代码

   

   <div>
   <input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选
   <div v-for="item in items" :key="item.id">
    <input 
      type="checkbox" 
      :value="item.id" 
      v-model="selectedItems"
    >
    {{ item.name }}
   </div>
   </div>

方法二：使用计算属性

1. 定义计算属性

   computed: {
   selectAll: {
    get() {
      return this.selectedItems.length === this.items.length
    },
    set(value) {
      this.selectedItems = value ? this.items.map(item => item.id) : []
    }
   }
   }

2. 简化后的模板

   

   <div>
   <input type="checkbox" v-model="selectAll"> 全选
   <div v-for="item in items" :key="item.id">
    <input 
      type="checkbox" 
      :value="item.id" 
      v-model="selectedItems"
    >
    {{ item.name }}
   </div>
   </div>

方法三：使用 watch 监听变化

1. 添加 watch 监听

   watch: {
   selectedItems(newVal) {
    this.selectAll = newVal.length === this.items.length
   },
   selectAll(newVal) {
    if (newVal) {
      this.selectedItems = this.items.map(item => item.id)
    } else if (this.selectedItems.length === this.items.length) {
      this.selectedItems = []
    }
   }
   }

2. 模板与第一种方法相同

注意事项

• 确保每个选项都有唯一标识符（如id）
• 方法二使用计算属性最为简洁
• 如果列表数据是动态加载的，需要重新计算全选状态
• 可以结合Vuex管理选中状态，实现跨组件共享