vue表单实现全选

Vue 表单实现全选功能

在 Vue 中实现表单全选功能，通常涉及一个全选复选框和多个子复选框。以下是实现方法：

基本实现

1. 数据绑定 使用 v-model 绑定全选复选框和子复选框的状态，子复选框通常是一个数组。

   

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

2. 计算属性 使用计算属性动态判断全选状态，并处理全选/取消全选逻辑。

   

   <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.selectAll = !this.selectAll;
       }
     }
   };
   </script>

进阶优化

1. 部分选中状态 当部分子选项被选中时，全选复选框显示为不确定状态（indeterminate）。

   computed: {
     selectAll: {
       get() {
         if (this.selectedItems.length === 0) return false;
         if (this.selectedItems.length === this.items.length) return true;
         return null; // 不确定状态
       },
       set(value) {
         this.selectedItems = value ? this.items.map(item => item.id) : [];
       }
     }
   }

2. 模板中添加不确定状态 使用 :indeterminate 绑定计算属性的不确定状态。

   <input 
     type="checkbox" 
     v-model="selectAll" 
     :indeterminate="selectAll === null"
     @change="toggleAll"
   >

注意事项

• 确保子复选框的 value 唯一，避免重复选中问题。
• 如果数据是动态加载的，需要在数据更新后重置选中状态。
• 对于大量数据，考虑性能优化，如分页加载或虚拟滚动。