vue.js 实现全选

Vue.js 实现全选功能

在 Vue.js 中实现全选功能可以通过绑定数据和事件来实现。以下是几种常见的方法：

方法一：使用 v-model 绑定全选状态

通过一个全选的复选框控制所有子选项的状态。子选项的状态变化也会影响全选状态。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1', selected: false },
        { id: 2, name: '选项2', selected: false },
        { id: 3, name: '选项3', selected: false }
      ]
    };
  },
  computed: {
    selectAll: {
      get() {
        return this.items.every(item => item.selected);
      },
      set(value) {
        this.items.forEach(item => {
          item.selected = value;
        });
      }
    }
  },
  methods: {
    toggleAll() {
      this.selectAll = !this.selectAll;
    }
  }
};
</script>

方法二：使用计算属性动态判断全选状态

通过计算属性动态判断是否所有子选项被选中，并更新全选状态。

<template>
  <div>
    <input type="checkbox" v-model="allSelected" @change="selectAllItems"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="item.selected" @change="updateSelectAll"> {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1', selected: false },
        { id: 2, name: '选项2', selected: false },
        { id: 3, name: '选项3', selected: false }
      ]
    };
  },
  computed: {
    allSelected() {
      return this.items.every(item => item.selected);
    }
  },
  methods: {
    selectAllItems() {
      const isAllSelected = this.allSelected;
      this.items.forEach(item => {
        item.selected = !isAllSelected;
      });
    },
    updateSelectAll() {
      // 子选项变化时自动更新全选状态
    }
  }
};
</script>

方法三：使用单独的数组存储选中项

通过维护一个单独的数组来存储选中的项，实现全选功能。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    };
  },
  computed: {
    isAllSelected: {
      get() {
        return this.selectedItems.length === this.items.length;
      },
      set(value) {
        if (value) {
          this.selectedItems = this.items.map(item => item.id);
        } else {
          this.selectedItems = [];
        }
      }
    }
  },
  methods: {
    handleSelectAll() {
      this.isAllSelected = !this.isAllSelected;
    }
  }
};
</script>

注意事项

• 确保 v-model 绑定的数据类型一致，避免出现意外行为。
• 如果选项数据是动态加载的，需要在数据更新后重新计算全选状态。
• 对于大量数据，建议使用虚拟滚动或其他优化手段，避免性能问题。

以上方法可以根据实际需求进行调整，灵活应用到不同的场景中。