vue element el-tree defaultExpandedKeys 如何动态修改？

Question

请问element-ui中的<el-tree>组件，default-checked-keys可通过setCheckedKeys来动态修改，但是属性defaultExpandedKeys 没有相应函数，请问如何动态修改？

Answer 1

看源码，以element-ui@1.4.10为例。

// '/packages/tree/src/tree.vue:103'
    watch: {
      // ...
      defaultExpandedKeys(newVal) {
        this.store.defaultExpandedKeys = newVal;
        this.store.setDefaultExpandedKeys(newVal);
      },
      // ...
    },

// '/packages/tree/src/tree.vue:255'
  setDefaultExpandedKeys(keys) {
    keys = keys || [];
    this.defaultExpandedKeys = keys;

    keys.forEach((key) => {
      const node = this.getNode(key);
      if (node) node.expand(null, this.autoExpandParent);
    });
  }

从这里可以看出，default-expanded-keys有监听，也就是说可以直接修改其值，如下：

tree.defaultExpandedKeys = [Math.round(Math.random() * 7)];

但这么做会有如下警告，意思是不应该这样做，应该采用双向绑定即:或v-bind的方式（即为用data或computed绑定变量到属性，不赘述）

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "defaultExpandedKeys"

如果使用函数的方式，则如下：

tree.store.setDefaultExpandedKeys([Math.round(Math.random() * 7)]); // 随机数仅用于示例

成功展开节点，但这里还有个问题，该方法没有处理需要收起的节点。

继续查看源码：

// '/packages/tree/src/model/node.js:280'
  collapse() {
    this.expanded = false;
  }

发现tree和tree-store都没有提供收起节点的方法，node的收起方法也就是修改了这个属性……

那么这就有点尴尬了，在调用setDefaultExpandedKeys方法之前，你可能需要自己去遍历子节点先收起所有的子节点……

或者，你也可以fork一下然后完善了提个pr，为开源社区做贡献啊~

这里是我测试用的示例