最近在做大家喜闻乐见的后台管理系统，做到权限控制的时候，通过角色绑定不同页面路由实现权限控制的效果。
1. 引入el-tree 搞定
<el-tree
class="tree-border"
v-if="open"
:data="menuOptions"
show-checkbox
:default-checked-keys="form.menuIds"
default-expand-all
ref="menu"
@check="checkEvent"
node-key="id"
empty-text="加载中，请稍候"
:props="defaultProps"
></el-tree>
直接把选中的节点给后端就ok 回显的时候再原样接收这些选中的节点id
let checkedKeys = this.$refs.menu.getCheckedKeys();
return checkedKeys;
完美无瑕！搞定，又是平平无奇的一天，今天可以直接下班啦！
2.咦？怎么有个BUG蹦出来啦？
场景：第一步:勾选两个子节点使父节点（账号管理）自动全选 保存好
第二步:在菜单页面父节（账号管理）点下新增一个子节点，然后回到角色权限页面
第三步：咦？这个新增的子节点怎么自动勾选了啊
按照前端逻辑来说，我第一步肯定把勾选了的父节点（账号管理）的节点id传给后端保存起来了， 然后再加了新的子节点后，后端会把以前勾选的子节点和父节点都返回给我，于是父节点勾选了导致它下面的子节点都勾选了。
“嗯！前端逻辑没问题，那一定是业务有毛病，业务逻辑要改！”
3.呜~ 业务逻辑就是这样，你前端想想办法
“新增的子节点不能自动勾选啊！，要操作员自己去配置！”
“后端能不能保留两个字段啊，接收一个全选的节点和接收一个半全选的节点，不然我很难办啊”
“不好改！”
事到如今，只好祭出文档大法，看看el-tree配置属性
check-strictly 浮出水面
嘿嘿,那我严格遵循父子不互相关联
<el-tree
class="tree-border"
v-if="open"
:data="menuOptions"
show-checkbox
:default-checked-keys="form.menuIds"
default-expand-all
ref="menu"
@check="checkEvent"
:check-strictly="true"
node-key="id"
empty-text="加载中，请稍候"
:props="defaultProps"
></el-tree>
这样每个节点单独控制，谁也别拉扯谁！
父慈子孝！
走你 打卡下班
4.“站住!你这样选中要一个一个点，重改！”
那我只能使出绝招 扯头发大法啦！
“要不？后端改一下逻辑？” “不好改！”
似乎确实没什么好办法，想一下（百度一下）
那就只能动态的父子相认了啊
设置个变量isStrict 接收的时候 isStrict 不认 修改的时候相认
<el-tree
class="tree-border"
v-if="open"
:data="menuOptions"
show-checkbox
:default-checked-keys="form.menuIds"
default-expand-all
ref="menu"
@check="checkEvent"
node-key="id"
:check-strictly="isStrict"
empty-text="加载中，请稍候"
:props="defaultProps"
></el-tree>
那么传给后端的时候就都传过去，一家人就是要整整齐齐
let checkedKeys = this.$refs.dept.getCheckedKeys();
//半选节点
let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys;
