vue实现功能单选取消单选全选取消全选 _生活百科

vue实现功能单选取消单选全选取消全选

代码部分

<template><div class=""><h1>全选框</h1><center><button @click="checkAnti">反选</button><table border="1px"><tr><!-- 全选框 --><td><input type="checkbox" @click="checkall" v-model="allchecked" /></td><td>姓名</td><td>年龄</td></tr><tr v-for="(item, index) in listData" :key="index"><td><inputtype="checkbox"v-model="item.status"@change="redio()"/></td><td>{{ item.name }}</td><td>{{ item.age }}</td></tr></table></center></div></template><script>export default {data() {return {allchecked: false, //全选 默认为false//数据listData: [//数据{name: "张三",age: 18,status: false,},{name: "李四",age: 18,status: true,},{name: "王五",age: 18,status: false,},{name: "赵六",age: 18,status: true,},],status: [],};},components: {},created() {},mounted() {},methods: {//单选框方法redio() {/*findIndex() 方法返回的是传入的一个需求条件（函数）符合条件的数组的第一个元素位置;本题思路:遍历数据集合中的每一个status属性 是否为false(如果有一个false则说明没有全部选中全选不需要为true)当不符合条件 即: 遍历集合中的属性没有false的属性 则全选框需要被点亮*/if (this.listData.findIndex( target => target.status === false) == -1) {// console.log("验证通过");this.allchecked=true} else {// console.log("验证不通过");this.allchecked=false}},//反选checkAnti() {this.listData.forEach((item) => {item.status = !item.status;});},//全选 取消全选checkall() {this.allchecked = !this.allchecked;this.listData.forEach((item) => {item.status = this.allchecked;});},},};</script><stylescoped></style>