采坑之element-ui tree组件

项目中，我在做权限角色管理这一块用到了树形组件，element-ui的。踩了一下坑。。场景是这样的.

我新建一个角色给给角色配置相应的菜单。每一个菜单都有对应的id。选了的就要传给后台，但是element-ui这个tree组件是这样的机制，当子集没有全选时 父级id是不会选中的，只有子集是全选状态父id才是选中的。所以这个就要改源码，后台是需要子集的父级id的。但是又有一个坑 就是我选了一个父级下的某一个子集，把父id子id传给后台，如果我想修改角色时候，打开默认显示我之前设置的，这个时候后台返回给我了父id和子id  当父id赋值给tree组件时候，又默认全选中了，实际子集是只有一个的。

所以，我的做法是源码还是得改，

第一步 找到项目中的\node_modules\element-ui\lib\element-ui.common.js文件

第二步 搜索文件中的TreeStore.prototype.getCheckedNodes方法中的

if (child.checked && (!leafOnly || leafOnly && child.isLeaf)) {

checkedNodes.push(child.data);

}

修改为

if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {

checkedNodes.push(child.data);

}

这样我先解决了不全选子集也会把父id传给后台的问题。

之后在解决修改角色有父id和一些子id时候不默认选中全部的问题。这个问题就比较好解决了。因为数据返回是树形结构。

我只需要遍历树拿到所有id放在一个数组，遍历时候把childern长度不是0的id放另一个数组（父）。然后在两个数组比较过滤父id

剩下的子集id就是我要的东西了。如果本来新增时候就全选了所有子集父亲id本身就带给后台，那我过滤父id了怎么办？其实也不用管 子集全部是选中状态父级即使过滤掉了也会默认选中嘛。

下面是我的一些代码

父组件

tree子组件