当前位置：首页 > VUE

vue实现表单全选

2026-02-18 18:57:25VUE

Vue 实现表单全选功能

数据绑定与全选状态

在 Vue 中实现表单全选功能，需要绑定一个全选复选框和多个子复选框的数据。通过 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" @change="updateSelectAll"> {{ item.name }}
      </label>
    </div>
  </div>
</template>

初始化数据

在 Vue 的 data 中初始化选项列表和选中项数组。

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: [],
      selectAll: false
    };
  }
};
</script>

全选逻辑实现

通过计算属性或方法实现全选和取消全选的逻辑。当点击全选复选框时，切换所有子选项的选中状态。

methods: {
  toggleAll() {
    if (this.selectAll) {
      this.selectedItems = this.items.map(item => item.id);
    } else {
      this.selectedItems = [];
    }
  },
  updateSelectAll() {
    this.selectAll = this.selectedItems.length === this.items.length;
  }
}

动态更新全选状态

当子选项的选中状态发生变化时，动态更新全选复选框的状态。如果所有子选项都被选中，全选复选框自动勾选；反之取消勾选。

watch: {
  selectedItems(newVal) {
    this.selectAll = newVal.length === this.items.length;
  }
}

完整代码示例

以下是完整的 Vue 组件代码，实现了表单全选功能。

vue实现表单全选

<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" @change="updateSelectAll"> {{ item.name }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: [],
      selectAll: false
    };
  },
  methods: {
    toggleAll() {
      if (this.selectAll) {
        this.selectedItems = this.items.map(item => item.id);
      } else {
        this.selectedItems = [];
      }
    },
    updateSelectAll() {
      this.selectAll = this.selectedItems.length === this.items.length;
    }
  },
  watch: {
    selectedItems(newVal) {
      this.selectAll = newVal.length === this.items.length;
    }
  }
};
</script>