vue实现多选全选

实现多选全选功能

在Vue中实现多选全选功能，通常需要结合复选框和数据绑定。以下是一个完整的实现方案：

基础实现

创建Vue实例，定义数据和方法：

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: '选项1', checked: false },
      { id: 2, name: '选项2', checked: false },
      { id: 3, name: '选项3', checked: false }
    ],
    selectAll: false
  },
  methods: {
    toggleSelectAll() {
      this.selectAll = !this.selectAll;
      this.items.forEach(item => {
        item.checked = this.selectAll;
      });
    },
    checkItem() {
      this.selectAll = this.items.every(item => item.checked);
    }
  }
});

HTML模板部分：

<div id="app">
  <label>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
    全选
  </label>
  <div v-for="item in items" :key="item.id">
    <label>
      <input type="checkbox" v-model="item.checked" @change="checkItem">
      {{ item.name }}
    </label>
  </div>
</div>

使用计算属性优化

计算属性可以更优雅地处理全选状态：

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: '选项1', checked: false },
      { id: 2, name: '选项2', checked: false },
      { id: 3, name: '选项3', checked: false }
    ]
  },
  computed: {
    selectAll: {
      get() {
        return this.items.every(item => item.checked);
      },
      set(value) {
        this.items.forEach(item => {
          item.checked = value;
        });
      }
    }
  }
});

HTML部分简化为：

<div id="app">
  <label>
    <input type="checkbox" v-model="selectAll">
    全选
  </label>
  <div v-for="item in items" :key="item.id">
    <label>
      <input type="checkbox" v-model="item.checked">
      {{ item.name }}
    </label>
  </div>
</div>

处理对象数组

当数据结构更复杂时，可以使用以下方式：

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: '选项1', selected: false },
      { id: 2, name: '选项2', selected: false },
      { id: 3, name: '选项3', selected: false }
    ]
  },
  computed: {
    allSelected: {
      get() {
        return this.items.every(item => item.selected);
      },
      set(value) {
        this.items.forEach(item => {
          item.selected = value;
        });
      }
    },
    selectedItems() {
      return this.items.filter(item => item.selected);
    }
  }
});

使用Vuex管理状态

在大型应用中，可以使用Vuex集中管理选择状态：

const store = new Vuex.Store({
  state: {
    items: [
      { id: 1, name: '选项1', selected: false },
      { id: 2, name: '选项2', selected: false },
      { id: 3, name: '选项3', selected: false }
    ]
  },
  mutations: {
    toggleAll(state, value) {
      state.items.forEach(item => {
        item.selected = value;
      });
    },
    toggleItem(state, id) {
      const item = state.items.find(item => item.id === id);
      if (item) item.selected = !item.selected;
    }
  },
  getters: {
    allSelected: state => state.items.every(item => item.selected)
  }
});

组件中使用：

export default {
  computed: {
    items() {
      return this.$store.state.items;
    },
    selectAll: {
      get() {
        return this.$store.getters.allSelected;
      },
      set(value) {
        this.$store.commit('toggleAll', value);
      }
    }
  },
  methods: {
    toggleItem(id) {
      this.$store.commit('toggleItem', id);
    }
  }
};

性能优化建议

对于大量数据的情况，可以考虑以下优化：

new Vue({
  data: {
    items: Array(1000).fill().map((_, i) => ({
      id: i + 1,
      name: `选项${i + 1}`,
      selected: false
    })),
    selectedIds: new Set()
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedIds.size === this.items.length;
      },
      set(value) {
        if (value) {
          this.items.forEach(item => {
            this.selectedIds.add(item.id);
          });
        } else {
          this.selectedIds.clear();
        }
      }
    }
  },
  methods: {
    toggleItem(id) {
      if (this.selectedIds.has(id)) {
        this.selectedIds.delete(id);
      } else {
        this.selectedIds.add(id);
      }
    }
  }
});

这种方法通过Set来存储选中ID，避免了频繁修改原始数据，适合大数据量场景。