Vue实现复选框的多选与全选
<div id="app">
<table>
<tr>
<th>
<!-- 这是全选复选框（即选中了这个复选框，所有选项复选框都被选中），其绑定数据的v-model为checkedAll，并绑定了改变事件changeAllChecked -->
<input
type="checkbox"
v-model="checkedAll"
@change="changeAllChecked()"
/>
</th>
<th>序号</th>
</tr>
<tr>
<!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
<td><input type="checkbox" value="1" v-model="checkedItem" /></td>
<td>1</td>
</tr>
<tr>
<!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
<td><input type="checkbox" value="2" v-model="checkedItem" /></td>
<td>2</td>
</tr>
<tr>
<!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
<td><input type="checkbox" value="3" v-model="checkedItem" /></td>
<td>3</td>
</tr>
<tr>
<!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
<td><input type="checkbox" value="4" v-model="checkedItem" /></td>
<td>4</td>
</tr>
</table>
</div>
<script>
export default {
data() {
return {
checkedAll: false,
// 设置选项复选框初始状态为未选中,由于是一个数组,所以值为[],即为空
checkedItem: [],
// 设置选中全选复选框后重新给选项复选框赋值,即选中所有的选项复选框
checkedAttr: ["1", "2", "3", "4", "5"],
};
},
methods: {
// 全选复选框状态改变监听事件
changeAllChecked() {
// 判断全选复选框是否选中
if (this.checkedAll) {
// 如果全选复选框被选中,则重新给选项复选框赋值,即选中所有的选项复选框
this.checkedItem = this.checkedAttr;
} else {
// 如果全选复未选框被选中,则设置为空值,即未选中所有的选项复选框
this.checkedItem = [];
}
},
},
watch: {
// 监听复选框项是否全部选中
checkedItem() {
// 判断选中选项复选框的值数组的长度是否与设定的长度相等，如果相等则所有的选项复选框被选中，否则没有被选中。
if (this.checkedItem.length == this.checkedAttr.length) {
// 如果所有复选框项全部被选中,则全选复选框也被勾选
this.checkedAll = true;
} else {
// 否则复选框不勾选
this.checkedAll = false;
}
},
},
};
</script>