vue表单全选实现

实现 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>

计算属性与方法

使用计算属性和方法处理全选与子选之间的联动逻辑。

<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;
    },
    updateSelectAll() {
      this.selectAll = this.selectedItems.length === this.items.length;
    }
  }
};
</script>

动态数据场景

如果数据是动态加载的，需要在数据更新后重置选中状态。

watch: {
  items() {
    this.selectedItems = [];
  }
}

样式优化

通过 CSS 美化复选框，提升用户体验。

<style>
label {
  display: block;
  margin: 5px 0;
  cursor: pointer;
}
input[type="checkbox"] {
  margin-right: 8px;
}
</style>

注意事项

• 确保子复选框的 value 唯一且与数据匹配。
• 使用 computed 属性避免直接操作 DOM。
• 动态数据场景下，通过 watch 监听数据变化并重置选中状态。