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>
复制
以上是一个简单的案例,如果对你有用请给我点个赞吧 ^ _ ^
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了