直接贴代码吧
<el-tree :data="formData.roleMenuList" class="zl-slot-tree" node-key="id" :props="defaultProps" :expand-on-click-node="false">
<div class="custom-tree-node" slot-scope="{ node, data }">
<div style="width: 195px;">
<span>{{ data.name }}</span>
<span class="menuCheck">
<el-checkbox v-model="data.isCheck" @change="((val) => { handleCheckAllChange(val, data) })">开启</el-checkbox>
</span>
</div>
<div class="funcList">
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="item in data.roleFunctionList" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</el-tree>
实现效果
要求点击开启时候,实现子数据的全选和反选。
原本的思路是,点击开启绑定个@change事件,但官网上checkbox的change事件,在事件中拿到的是选中后改变的状态,也就是true或者false,并且不接受其他传值。
后来百度了下,网友都是用手动递归,然后给el-checkbox-group绑定个v-model,v-model为选中checkbox的id集合,我嫌太麻烦。就想了个办法
利用es6语法,手动塞值, 这样我们在方法里既能拿到改变后的状态,又能拿到当前菜单的子数据。