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?

Vue.js element-ui
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

Previous: The mysql root account seems to be messed up.

Next: How can the ant design mobile of react upload only one picture?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu