vue表单实现全选

Vue 表单全选功能实现

基础实现方案

1. 数据绑定 在 Vue 的 data 中定义两个核心数据项：

   data() {
     return {
       checkAll: false, // 全选状态
       checkedItems: [], // 已选中的项
       itemList: [ /* 你的数据数组 */ ] // 原始数据列表
     }
   }

2. 全选复选框逻辑 使用 v-model 绑定全选状态，并通过计算属性实现双向控制：

   computed: {
     isAllSelected: {
       get() {
         return this.checkedItems.length === this.itemList.length
       },
       set(value) {
         this.checkAll = value
         this.checkedItems = value ? [...this.itemList] : []
       }
     }
   }

3. 模板部分

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

进阶优化方案

1. 性能优化 对于大数据量场景，使用对象存储选中状态而非数组：

   

   data() {
     return {
       selectedMap: {}
     }
   },
   methods: {
     toggleAll(checked) {
       this.itemList.forEach(item => {
         this.$set(this.selectedMap, item.id, checked)
       })
     }
   }

2. 部分选中状态 实现中间态（部分选中）的视觉效果：

   computed: {
     isIndeterminate() {
       return this.checkedItems.length > 0 
         && this.checkedItems.length < this.itemList.length
     }
   }

   模板中添加：

   <input 
     type="checkbox" 
     :indeterminate="isIndeterminate"
     v-model="isAllSelected"
   >

3. 深层对象处理 当处理嵌套对象时，使用路径标识：

   

   methods: {
     isChecked(item) {
       return this.selectedMap[item.path.join('.')]
     },
     setChecked(item, checked) {
       this.$set(this.selectedMap, item.path.join('.'), checked)
     }
   }

注意事项

1. 响应式更新 当动态添加/删除数据项时，需要同步更新选中状态：

   watch: {
     itemList: {
       handler(newList) {
         if (this.checkAll) {
           this.checkedItems = [...newList]
         }
       },
       deep: true
     }
   }

2. TypeScript 支持 使用 TypeScript 时定义明确类型：

   interface ListItem {
     id: string | number
     // 其他字段
   }
   
   @Component
   export default class extends Vue {
     private checkAll = false
     private checkedItems: ListItem[] = []
     private itemList: ListItem[] = []
   }

3. 表单提交处理 提交时转换数据格式：

   methods: {
     submit() {
       const ids = this.checkedItems.map(item => item.id)
       // 提交到后端
     }
   }

以上方案可根据具体业务需求进行组合调整，实现灵活的表单全选功能。