vue 实现全选

Vue 实现全选功能

全选功能在表格或列表中很常见，以下是基于 Vue 的实现方法：

基础实现方式

1. 使用 v-model 绑定全选复选框的状态
2. 使用计算属性管理选中状态

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' }
      ],
      selectedItems: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : []
      }
    }
  },
  methods: {
    toggleAll() {
      this.selectedItems = this.selectAll ? this.items.map(item => item.id) : []
    }
  }
}
</script>

表格中的全选实现

在表格场景下，实现方式类似但结构更复杂：

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll"></th>
        <th>名称</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="product in products" :key="product.id">
        <td><input type="checkbox" v-model="selectedProducts" :value="product.id"></td>
        <td>{{ product.name }}</td>
        <td>{{ product.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100 },
        { id: 2, name: '商品B', price: 200 },
        { id: 3, name: '商品C', price: 300 }
      ],
      selectedProducts: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedProducts.length === this.products.length
      },
      set(value) {
        this.selectedProducts = value ? this.products.map(p => p.id) : []
      }
    }
  }
}
</script>

注意事项

1. 当数据动态加载时，需要重置选中状态
2. 部分选中状态可通过计算属性处理
3. 大量数据时考虑性能优化，避免不必要的渲染

// 部分选中状态计算
isIndeterminate() {
  return this.selectedItems.length > 0 && this.selectedItems.length < this.items.length
}

使用 Vuex 管理状态

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

// store.js
export default new Vuex.Store({
  state: {
    items: [...],
    selectedItems: []
  },
  mutations: {
    TOGGLE_ALL_ITEMS(state, selectAll) {
      state.selectedItems = selectAll ? state.items.map(item => item.id) : []
    },
    TOGGLE_ITEM(state, itemId) {
      const index = state.selectedItems.indexOf(itemId)
      if (index === -1) {
        state.selectedItems.push(itemId)
      } else {
        state.selectedItems.splice(index, 1)
      }
    }
  }
})

这些方法涵盖了 Vue 中实现全选功能的主要场景和注意事项，可以根据实际需求选择适合的实现方式。