vue实现多选和全选

Vue 实现多选和全选功能

多选和全选是常见的交互功能，可以通过 Vue 的数据绑定和事件处理轻松实现。以下是一个完整的实现方案：

数据准备

在 Vue 的 data 中定义两个关键数据项：

• items: 存储所有可选项目的数组
• selectedItems: 存储已选中项目的数组

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

多选实现

使用 v-model 绑定复选框到 selectedItems 数组，通过 value 属性设置每个选项的值：

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

全选实现

添加一个全选复选框，并通过计算属性控制其状态：

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

全选复选框的模板部分：

<input 
  type="checkbox" 
  v-model="allSelected"
  id="select-all"
>
<label for="select-all">全选</label>

部分选中状态

如果需要显示部分选中状态（如某些但不是全部选项被选中），可以修改计算属性：

computed: {
  allSelected: {
    get() {
      return this.selectedItems.length === this.items.length
    },
    set(value) {
      this.selectedItems = value ? [...this.items] : []
    }
  },
  indeterminate() {
    return this.selectedItems.length > 0 && 
           this.selectedItems.length < this.items.length
  }
}

然后在全选复选框上绑定 indeterminate 属性：

<input 
  type="checkbox" 
  v-model="allSelected"
  :indeterminate="indeterminate"
  id="select-all"
>

性能优化

对于大型列表，可以使用 Set 代替数组来提高查找性能：

data() {
  return {
    selectedItems: new Set()
  }
},
methods: {
  toggleSelection(item) {
    if (this.selectedItems.has(item)) {
      this.selectedItems.delete(item)
    } else {
      this.selectedItems.add(item)
    }
  }
}

完整示例

以下是一个完整的组件示例：

<template>
  <div>
    <div>
      <input 
        type="checkbox" 
        v-model="allSelected"
        :indeterminate="indeterminate"
        id="select-all"
      >
      <label for="select-all">全选</label>
    </div>

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  },
  computed: {
    allSelected: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value ? [...this.items] : []
      }
    },
    indeterminate() {
      return this.selectedItems.length > 0 && 
             this.selectedItems.length < this.items.length
    }
  }
}
</script>

这种方法利用了 Vue 的响应式特性，通过数据绑定自动保持 UI 和状态的同步，实现简洁高效的多选和全选功能。