当前位置：首页 > article >正文

Vue.js组件开发-如何实现全选反选

article 2025/3/2 4:04:03

在 Vue.js 中实现全选和反选功能，可以通过结合`v-model`、计算属性和事件处理来完成。

实现思路

• 数据绑定：为每个复选框绑定一个选中状态。

• 全选控制：通过一个复选框控制所有复选框的选中状态。

• 反选控制：通过一个按钮或复选框切换所有复选框的选中状态。

示例

方案一：基础实现

<template>
  <div>
    <!-- 全选复选框 -->
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" />
    <span>全选</span>
    <!-- 选项列表 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" v-model="item.selected" />
        {
  
  { item.text }}
      </li>
    </ul>
    <!-- 反选按钮 -->
    <button @click="toggleSelect">反选</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectAll: false,
      items: [
        { text: 'Item 1', selected: false },
        { text: 'Item 2', selected: false },
        { text: 'Item 3', selected: false },
      ],
    };
  },
  methods: {
    // 全选逻辑
    toggleSelectAll() {
      this.items.forEach((item) => {
        item.selected = this.selectAll;
      });
    },
    // 反选逻辑
    toggleSelect() {
      this.items.forEach((item) => {
        item.selected = !item.selected;
      });
    },
  },
};
</script>

方案二：使用计算属性优化

通过计算属性动态更新全选状态，使代码更加简洁和可维护。

<template>
  <div>
    <!-- 全选复选框 -->
    <input type="checkbox" v-model="selectAll" />
    <span>全选</span>
    <!-- 选项列表 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" v-model="item.selected" />
        {
  
  { item.text }}
      </li>
    </ul>
    <!-- 反选按钮 -->
    <button @click="toggleSelect">反选</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: 'Item 1', selected: false },
        { text: 'Item 2', selected: false },
        { text: 'Item 3', selected: false },
      ],
    };
  },
  computed: {
    // 计算全选状态
    selectAll: {
      get() {
        // 如果所有项都被选中，返回 true
        return this.items.every((item) => item.selected);
      },
      set(value) {
        // 设置所有项的选中状态
        this.items.forEach((item) => {
          item.selected = value;
        });
      },
    },
  },
  methods: {
    // 反选逻辑
    toggleSelect() {
      this.items.forEach((item) => {
        item.selected = !item.selected;
      });
    },
  },
};
</script>