vue实现数组全选

Vue 实现数组全选功能

使用 v-model 绑定复选框

在 Vue 中可以通过 v-model 绑定一个数组来实现全选功能。以下是实现步骤：

1. 定义数据模型

   data() {
   return {
    items: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ],
    selectedItems: []
   }
   }

2. 创建全选计算属性

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

3. 模板代码

   
   <div>
   <label>
    <input type="checkbox" v-model="allSelected"> 全选
   </label>

```

使用 watch 监听变化

另一种实现方式是使用 watch 监听选择状态变化：

1. 数据定义

   data() {
   return {
    items: [
      { id: 1, name: '选项A', selected: false },
      { id: 2, name: '选项B', selected: false },
      { id: 3, name: '选项C', selected: false }
    ],
    selectAll: false
   }
   }

2. 监听器实现

   watch: {
   selectAll(val) {
    this.items.forEach(item => {
      item.selected = val
    })
   }
   }

3. 模板代码

   

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

```

使用自定义方法

通过自定义方法实现更复杂的逻辑控制：

1. 方法定义

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

2. 模板绑定

   
   <button @click="toggleSelectAll">
   {{ selectedItems.length === items.length ? '取消全选' : '全选' }}
   </button>

```

以上三种方法都能实现数组全选功能，开发者可以根据具体需求选择最适合的实现方式。