el-checkbox遍历的的时候如何使用

复制代码

<template> <div class="checkBox"> <template v-for="item in checkedCities"> <el-checkbox :key="item.id" v-model="item.isCheck" @change="handleCheckAllChange(item)">{{item.title}} </el-checkbox> <div style="padding-left:25px"> <el-checkbox v-for="child in item.children" :key="child.id" v-model="child.isCheck" @change="handleCheckedCitiesChange(item)">{{child.title}}</el-checkbox> </div> </template> </div> </template> <script> export default { data() { return { checkedCities: [{ id: 1, title: "水果", isCheck: false, children: [{ id: 2, title: "香蕉", isCheck: false, }, { id: 3, title: "苹果", isCheck: true, }, { id: 4, title: "菠萝", isCheck: false, } ] },{ id:5, title:"饮料", isCheck:false, children:[ { id:6, title:"咖啡", isCheck:false }, { id:7, title:"汽水", isCheck:true } ] }], }; }, methods: { handleCheckAllChange(node) { if (node.children && node.children instanceof Array && node.children.length > 0) { node.children.forEach(item => { item.isCheck = node.isCheck }) } }, handleCheckedCitiesChange(parent) { parent.isCheck = parent.children.every(item=>item.isCheck) } } }; </script> <style> .checkBox{ text-align: left; padding-left: 90px; } </style>
复制
复制代码

以上是一个简单的案例,如果对你有用请给我点个赞吧 ^ _ ^

posted on   久居我梦  阅读(629)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示