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>
文章插圖
【vue實(shí)現(xiàn)功能 單選 取消單選 全選 取消全選】
經(jīng)驗(yàn)總結(jié)擴(kuò)展閱讀
- VLQ & Base64 VLQ 編碼方式的原理及代碼實(shí)現(xiàn)
- vue2使用組件進(jìn)行父子互相傳值的sync語法糖方法和原生方法
- Object Detection 【YOLOv5】LabVIEW+YOLOv5快速實(shí)現(xiàn)實(shí)時物體識別含源碼
- Springboot 之 Filter 實(shí)現(xiàn)超大響應(yīng) JSON 數(shù)據(jù)壓縮
- Java一次返回中國所有省市區(qū)三級樹形級聯(lián)+前端vue展示【200ms內(nèi)】
- SpringBoot+Vue3 AgileBoot - 手把手一步一步帶你Run起全棧項(xiàng)目
- FeatureTeam 干貨|什么是特性團(tuán)隊(duì)/功能團(tuán)隊(duì)
- qiankun+vue,為什么我的子應(yīng)用的子路由老是跳404?這么解決
- SpringBoot 自定義注解 實(shí)現(xiàn)多數(shù)據(jù)源
- .NET 采用 SkiaSharp 生成二維碼和圖形驗(yàn)證碼及圖片進(jìn)行指定區(qū)域截取方法實(shí)現(xiàn)
