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

在 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() {// 如果所有项都被选中，返回 truereturn 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>

说明

• v-model：用于双向绑定复选框的状态。

• 计算属性：通过`get`和`set`方法动态更新全选状态。

• 全选逻辑：当全选复选框被选中时，所有选项都被选中；否则，所有选项都不被选中。

• 反选逻辑：通过切换每个选项的选中状态实现反选。