vue實(shí)現(xiàn)功能單選取消單選全選取消全選 _生活百科

vue實(shí)現(xiàn)功能單選取消單選全選取消全選

代碼部分

<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, //全選 默認(rèn)為false//數(shù)據(jù)listData: [//數(shù)據(jù){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() 方法返回的是傳入的一個需求條件（函數(shù)）符合條件的數(shù)組的第一個元素位置;本題思路:遍歷數(shù)據(jù)集合中的每一個status屬性 是否為false(如果有一個false則說明沒有全部選中全選不需要為true)當(dāng)不符合條件 即: 遍歷集合中的屬性沒有false的屬性 則全選框需要被點(diǎn)亮*/if (this.listData.findIndex( target => target.status === false) == -1) {// console.log("驗(yàn)證通過");this.allchecked=true} else {// console.log("驗(yàn)證不通過");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>