vue实现列表全选

Vue 列表全选实现方法

基础实现（基于 v-model 和计算属性）

1. 模板部分：使用 v-model 绑定全选状态，并为每个列表项添加复选框

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

2. 脚本部分：通过计算属性和方法控制全选状态

   <script>
   export default {
   data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 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.selectAll = !this.selectAll
    }
   }
   }
   </script>

使用 Vuex 的状态管理方案（适用于大型应用）

1. 在 store 中定义状态和 mutations

   // store.js
   const store = new Vuex.Store({
   state: {
    items: [
      { id: 1, name: 'Item 1', selected: false },
      { id: 2, name: 'Item 2', selected: false },
      { id: 3, name: 'Item 3', selected: false }
    ]
   },
   mutations: {
    TOGGLE_ALL(state, payload) {
      state.items.forEach(item => {
        item.selected = payload
      })
    },
    TOGGLE_ITEM(state, id) {
      const item = state.items.find(item => item.id === id)
      if (item) item.selected = !item.selected
    }
   }
   })

2. 组件中使用 mapState 和 mapMutations

   
   <template>
   <div>
    <input 
      type="checkbox" 
      :checked="allSelected"
      @change="TOGGLE_ALL($event.target.checked)"
    > 全选
    <ul>
      <li v-for="item in items" :key="item.id">
        <input 
          type="checkbox" 
          :checked="item.selected"
          @change="TOGGLE_ITEM(item.id)"
        >
        {{ item.name }}
      </li>
    </ul>
   </div>
   </template>

import { mapState, mapMutations } from 'vuex'

export default { computed: { ...mapState(['items']), allSelected() { return this.items.every(item => item.selected) } }, methods: { ...mapMutations(['TOGGLE_ALL', 'TOGGLE_ITEM']) } }

```

性能优化方案（针对大数据列表）

1. 使用虚拟滚动技术（如 vue-virtual-scroller）

   <template>
   <div>
    <input type="checkbox" v-model="selectAll"> 全选
    <RecycleScroller
      class="scroller"
      :items="items"
      :item-size="50"
      key-field="id"
    >
      <template v-slot="{ item }">
        <div class="item">
          <input type="checkbox" v-model="selectedItems" :value="item.id">
          {{ item.name }}
        </div>
      </template>
    </RecycleScroller>
   </div>
   </template>

2. 添加防抖处理（适用于频繁操作）

   

   methods: {
   toggleAll: _.debounce(function() {
    this.selectAll = !this.selectAll
   }, 300)
   }

注意事项

• 当列表数据动态加载时，需要重置全选状态
• 深层对象需要配合 Vue.set 或展开运算符确保响应式
• 服务端分页情况下需要特殊处理全选逻辑
• 移动端需考虑触摸事件和 UI 适配