当前位置：首页 > VUE

vue表单全选实现

2026-03-29 19:57:19VUE

实现 Vue 表单全选功能

基础全选逻辑

定义全选状态和数据列表
在 Vue 的 data 中定义全选状态和需要渲染的数据列表：

data() {
  return {
    selectAll: false,
    items: [
      { id: 1, name: 'Item 1', checked: false },
      { id: 2, name: 'Item 2', checked: false }
    ]
  }
}

全选复选框绑定
使用 v-model 绑定全选状态，并通过计算属性动态更新：

computed: {
  isAllSelected: {
    get() {
      return this.items.every(item => item.checked)
    },
    set(value) {
      this.selectAll = value
      this.items.forEach(item => {
        item.checked = value
      })
    }
  }
}

模板代码示例
在模板中绑定全选和单项选择：

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

进阶实现方式

使用 Vuex 管理状态
当项目较复杂时，可以通过 Vuex 集中管理选中状态：

// store.js
state: {
  items: [...],
  selectedIds: []
},
mutations: {
  TOGGLE_ALL(state, checked) {
    state.selectedIds = checked ? state.items.map(i => i.id) : []
  }
}

性能优化方案
对于大数据列表，采用分页或虚拟滚动方案：

methods: {
  handleSelectAll() {
    const visibleItems = this.paginatedData
    const allVisibleSelected = visibleItems.every(i => this.selected.has(i.id))

    visibleItems.forEach(item => {
      allVisibleSelected 
        ? this.selected.delete(item.id)
        : this.selected.add(item.id)
    })
  }
}

响应式更新优化
使用 watch 深度监听选中状态变化：

watch: {
  items: {
    deep: true,
    handler(newVal) {
      this.selectAll = newVal.every(i => i.checked)
    }
  }
}

特殊场景处理

分页全选实现
保持跨页选中状态需要额外存储已选 ID：

data() {
  return {
    selectedIds: new Set()
  }
},
methods: {
  togglePageSelection() {
    const currentPageIds = this.currentPageItems.map(i => i.id)
    const allSelected = currentPageIds.every(id => this.selectedIds.has(id))

    currentPageIds.forEach(id => {
      allSelected ? this.selectedIds.delete(id) : this.selectedIds.add(id)
    })
  }
}

表格全选组件封装
创建可复用的表格全选组件：

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="allSelected"></th>
        <!-- 其他表头 -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td><input type="checkbox" v-model="selected" :value="row.id"></td>
        <!-- 其他单元格 -->
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      selected: []
    }
  },
  computed: {
    allSelected: {
      get() { /*...*/ },
      set() { /*...*/ }
    }
  }
}
</script>

与后端交互处理
提交时只传递选中项的 ID：

methods: {
  submitSelected() {
    const payload = {
      selectedIds: this.items
        .filter(item => item.checked)
        .map(item => item.id)
    }
    // 调用API...
  }
}