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?
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?
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.
Previous: The mysql root account seems to be messed up.
Next: How can the ant design mobile of react upload only one picture?
Click the corresponding tag to close the corresponding page, how to write this, please < template > ...
Technical note: vue-cli+elementUI table control Business scenario description: 1.tabletable 2.end_date 3. 4.10>;10>ago solution: use the row-class-name attribute in the elementUI talbe control to determine whether to include the specified fiel...
such as headings, I want to sort the form by dragging within el-dialog. can be dragged if it is placed on the general surface. indicates that I have correctly introduced sortablejs into , but if I put the form on el-dialog, drag sorting will become ...
there is a requirement that when Select selects a city, it needs fuzzy search, which supports not only Chinese, but also pinyin, acronyms and so on. The back end will give me the corresponding fields, but I find that using filter-method to pass in funct...
as shown below, the change event was supposed to pass the numeric size in input. I want to post the scope.row data in this event, but I don t know how to send the two data at the same time. The following way of writing will send out the row data, but...
how is the lower version of the element-ui custom theme initialized? I use version 1.3.4 when et initialization variable files are installed, I am always prompted please install element-theme-chalk but this corresponds to the latest version, a...
treedivtree truepush iterate through the new array. Each item can be closed. How to uncheck the tree at the same time when closing? ...
have you encountered this situation? How to solve it? Why ...
<transition name="fade"> <el-dialog :visible.sync="isShown" :append-to-body=true width="100%" > <div> 111111 < div>...
similar to this form ...
when elementUI uses select, the drop-down position is misplaced and TypeError: PopperJS is not a constructor is reported in vue-popper. [Vue warn]: Error in event handler for "updatePopper": "TypeError: PopperJS is not a constructor&qu...
use the component card provided by element-ui to display goods. After getting all the goods at the front end, all the goods are displayed by card external v-for loop output. wants to display four items in one line, but I don t know how to control the ...
the 1.vue project has two parts, permissions and business. The business module is the startup entry of vue. You intend to package the permissions separately, and then the business module introduces this permission package in package.json. 2. Tried npm p...
I encountered a problem when using Element UI. I wanted to customize a component according to el-table, but I found it impossible to render the content of el-tabel-col dynamically. this is the official usage. Use slot to customize the content <temp...
when you open the page after it is introduced on demand, it will prompt you for about 3 seconds console does not show throw error, black question mark face! ...
I would like to ask you how to adjust the width of the primary navigation and the secondary navigation. I try to set the width of .el-row to 100%. < el-aside > Thank you ~ ...
Error in event handler for "row-contextmenu": "TypeError: $event.preventDefault is not a function" Please tell me how to add .client to row-contextmenu . ...
element uiui : add 1: I later commented out < component > < component > dynamic mount components, and there was no problem. But I don t see where there is bugmuri in my code. add 2: through debugging, I have located the problem now, because ...
how can select empty the selected data and display the original placeholder?? here is my code: ...
the uploaded tag reads like this. <el-upload class="upload-demo" ref="uploadNewFile" :action="actionUrl" :file-list="fileList" :auto-upload="false" :on-change="newFileCha...