el-tree全选，父子联动，展开折叠，以及多选和默认选中

html部分

  <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')"
                  >展开/折叠</el-checkbox
                >
                <el-checkbox
                  v-model="menuNodeAll"
                  @change="handleCheckedTreeNodeAll($event, 'menu')"
                  >全选/全不选</el-checkbox
                >
                <el-checkbox
                  v-model="menuCheckStrictly"
                  @change="handleCheckedTreeConnect($event, 'menu')"
                  >父子联动</el-checkbox
                >
                <el-tree
                  :data="roleOptions"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNode"
                  node-key="menuId"
                  ref="tree"
                  default-expand-all
                  :check-on-click-node="true"
                  :check-strictly="!menuCheckStrictly"
                  show-checkbox
                  class="trees"
                  @check-change="handleCheckChange"
                  @node-click="handleNodeClick"
                >
                </el-tree>

1.展开折叠（比较简单一句代码实现）

 // 树权限（展开/折叠）
    handleCheckedTreeExpand (value, type) {
      let treeList = this.roleOptions
      for (let i = 0; i < treeList.length; i++) {
        this.$refs.tree.store.nodesMap[treeList[i].menuId].expanded = value
      }
    },

 2.父子联动（这个也比较简单）

// html:(树结构部分添加方法)
:check-strictly="!menuCheckStrictly"

 // 树权限（父子联动js部分）
    handleCheckedTreeConnect (value, type) {
      this.menuCheckStrictly = value ? true : false
    },

3.全选和全不选

这部分一开始参考了若依，用一句代码去实现， this.$refs.tree.setCheckedNodes(value ? this.roleOptions: []);看若依显示没问题，但是我的页面父子联动可以正常显示，但是如果父子不联动的情况全选之选中了最外层，实在无奈的情况下就换了方法解决

 // 树权限（全选/全不选）
    handleCheckedTreeNodeAll (value, type) {
      let arr = []
      if(value){
        this.arrForEach(this.roleOptions, arr, 'menuId')
      }
      this.$refs.tree.setCheckedKeys(arr)
    },

全选时我递归遍历了数组，拿到了所有的id然后一个个设置选中，虽然麻烦了点，但是最后实现了想要的效果

4.多选实现

handleCheckChange (data, checked, indeterminate) {
      this.selectKeys = this.$refs.tree.getCheckedKeys()
      // console.log(this.selectKeys)
    },
arrForEach (arr, arr1, str) {
      arr.forEach(item => {
        if (str) {
          arr1.push(item[str])
        } else {
          arr1.push(item)
        }
        if (item.children && item.children.length) {
          this.arrForEach(item.children, arr1, str)
        }
      })
    },

5.初始状态默认选中（获取数据后等dom完成再通过选中id数组去设置选中状态）

 this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(this.selectKeys)
        })