<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>
以上是一个简单的案例,够用了。
标签:node,el,遍历,false,title,id,checkbox,isCheck,children From: https://www.cnblogs.com/jzm2842688813/p/16593120.html