直接贴代码吧

<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语法，手动塞值， 这样我们在方法里既能拿到改变后的状态，又能拿到当前菜单的子数据。