vue实现批量选择

vue实现批量选择的方法

在Vue中实现批量选择功能通常涉及列表数据的多选操作，结合复选框或自定义UI组件完成。以下是几种常见实现方式：

基础复选框实现

使用v-model绑定数组来存储选中的项，适用于简单场景：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedItems: [] // 存储选中项的ID
    }
  }
}
</script>

全选/反选功能

添加全选复选框逻辑，通过计算属性实现：

<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 {
  computed: {
    selectAll: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value 
          ? this.items.map(item => item.id) 
          : []
      }
    }
  }
}
</script>

表格批量选择

结合Element UI等组件库实现表格多选：

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{ name: 'Item 1' }, { name: 'Item 2' }],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

自定义选择组件

封装可复用的批量选择组件：

<template>
  <selectable-list 
    :items="items" 
    v-model="selectedItems"
  >
    <template #item="{ item, selected }">
      <div :class="{ 'active': selected }">
        {{ item.name }}
      </div>
    </template>
  </selectable-list>
</template>

<script>
import SelectableList from './SelectableList.vue'

export default {
  components: { SelectableList },
  data() {
    return {
      items: [...],
      selectedItems: []
    }
  }
}
</script>

性能优化建议

对于大数据量场景：

• 使用虚拟滚动（如vue-virtual-scroller）
• 分页加载数据
• 避免直接绑定大数组到v-model
• 采用惰性渲染策略

状态管理整合

当需要跨组件共享选中状态时，可将选中数据存入Vuex：

// store.js
export default new Vuex.Store({
  state: {
    selectedItems: []
  },
  mutations: {
    updateSelected(state, payload) {
      state.selectedItems = payload
    }
  }
})

以上方法可根据具体需求组合使用，关键点在于合理管理选中状态的数据流和及时更新UI反馈。