How to modify vue element el-tree defaultExpandedKeys dynamically?

I would like to ask the < el-tree > component in element-ui, default-checked-keys can be dynamically modified through setCheckedKeys, but the property defaultExpandedKeys does not have the corresponding function, how to modify dynamically?

Mar.02,2021

look at the source code. Take element-ui@1.4.10 as an example.

// '/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);
    });
  }

as you can see here, default-expanded-keys is monitored, that is, its value can be modified directly, as follows:

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

but doing so will have the following warning, meaning that this should not be done, and that two-way binding should be used, that is, : or v-bind (that is, bind variables to properties with data or computed, without repeating)

[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"

if you use the function, it is as follows:

tree.store.setDefaultExpandedKeys([Math.round(Math.random() * 7)]); // 

the node was successfully expanded, but there is another problem here. This method does not deal with the node that needs to be folded up.

continue to check the source code:

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

it is found that neither tree nor tree-store provides a way to wrap up the node, and the node method modifies this property.

then this is a little awkward. Before calling the setDefaultExpandedKeys method, you may need to traverse the child nodes yourself and put away all the child nodes first.

or, you can fork a bit and then perfect a pr, to contribute to the open source community.

here is an example of

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2b553-2ba85.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2b553-2ba85.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?