Vue如何实现全选

Vue实现全选功能的方法

全选功能通常用于表格或多选框列表，以下是几种实现方式：

使用v-model绑定数组

通过v-model绑定一个数组来记录选中的项，全选时将所有项的id加入数组：

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    handleSelectAll() {
      if (this.selectAll) {
        this.selectedItems = this.list.map(item => item.id)
      } else {
        this.selectedItems = []
      }
    }
  }
}
</script>

使用计算属性实现双向绑定

通过计算属性的getter和setter实现更智能的全选逻辑：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1', checked: false },
        { id: 2, name: '选项2', checked: false }
      ]
    }
  },
  computed: {
    allSelected: {
      get() {
        return this.items.every(item => item.checked)
      },
      set(value) {
        this.items.forEach(item => {
          item.checked = value
        })
      }
    }
  }
}
</script>

使用Vuex管理状态

对于大型应用，可以使用Vuex集中管理选中状态：

// store.js
const store = new Vuex.Store({
  state: {
    items: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' }
    ],
    selectedIds: []
  },
  mutations: {
    SELECT_ALL(state) {
      state.selectedIds = state.items.map(item => item.id)
    },
    CLEAR_ALL(state) {
      state.selectedIds = []
    }
  }
})

性能优化建议

对于大数据列表，使用对象存储选中状态比数组更高效：

data() {
  return {
    selectedMap: {}  // 使用 {id: true} 格式存储
  }
}

注意事项

• 全选状态需要考虑部分选中的中间状态
• 对于分页数据需要明确是全选当前页还是所有数据
• 使用deep watch或计算属性监听选中状态变化