element ui tree 怎么自己去控制收缩和展开？

Question

用户自己通过点击事件去控制，而不用默认的按钮
、

这是我想要做的效果，
通过修改css的方式，把默认三角按钮隐藏。
使用自定义按钮，配合“default-expanded-keys”这个属性，发现只能展示，不能收回，而且只在一级菜单有效。

求互一下大佬，或者提供一下思路，感激不尽

Answer 1

自己从网上找到一个方法，然后加了一些功能。
toogleExpand 是用来响应 展开/收起按钮的点击事件。
checkExpendNode 用来重新判断展开项，

应为在动态增加后， 整个tree回重新生成一次，导致上一次列表中expanded的数据丢失，所有在每次切换展开项时，会将展开的项保存起来， 数据更新之后，再根据上一次保存的数据，还远以前的状态。

checkExpendNode 是在每次数据变化时执行，我直接放在绑定tree的data属性的watch 函数中，监听属性变化之后执行。

目前来看，功能是满足了，性能未测试。

    // 绑定了上图中的按钮的事件
    toogleExpand(node) {
      const nodeList = this.$refs.treeX.store._getAllNodes();
      const len = nodeList.length;
      console.log(nodeList);
      for (var i = 0; i < len; i++) {
        if (node.id === nodeList[i].id) {
          const node = nodeList[i];
          node.expanded = !node.expanded;
          if (!node.expanded) {
            closeChidlren(node);
          }
          break;
        }
      }

      function hasChild(node) {
        return node.childNodes && node.childNodes.length;
      }

      // 关闭父级时，关闭所有子集
      function closeChidlren(node) {
        if (hasChild(node)) {
          node.childNodes.forEach(ele => {
            ele.expanded = false;
            if (hasChild(ele)) {
              closeChidlren(ele);
            }
          });
        }
      }

      this.expandKeys = nodeList
        .filter(ele => ele.expanded)
        .map(ele => ele.key);
    },
    // 数据更新后，会初始化所有node，丢失节点展开数据，
    // 这里会将节点重新展开，不要使用node.id,这个id是变化的，使用key（固定不会变，对应实际数据ID）
    checkExpendNode() {
      const nodeList = this.$refs.treeX.store._getAllNodes();
      const len = nodeList.length;
      for (var i = 0; i < len; i++) {
        nodeList[i].expanded = this.expandKeys.indexOf(nodeList[i].key) !== -1;
      }
    }