The default value problem is displayed in the element UI cascade selector editing function

my side is a three-level cascade. The official website directly equals selectedOptions to a value containing three levels of value, which can be displayed by default. However, after I query the data, assigning values to the selectedOptions, page can only display the first level, and can not correctly realize the three-level default value display ~

. 
 <el-cascader
            :options="options"
            v-model="selectedOptions"
            @active-item-change="handleChange"
            @change="dleChange"
            clearable
            :props="props">
 </el-cascader>
Element-ui
Mar.19,2021

I also encountered this problem today. I need to echo a cascading menu with an address, and all kinds of attempts can be done in the end:
1. In my dynamic loading method, users select a node and request the data of subordinate options from the backend at the same time. So first of all, when the page is loaded, the first-level menu
2 will be loaded, the data returned by the background will be converted into the data needed by el-cascader and assigned to the corresponding v-model (selectedOptions)
3, and then the (children) list of lower-level options will be cascaded according to the returned data
Note: be sure to perform the second step before the third step; in fact, there should be no problem to assign values directly without dynamic loading.

it is recommended that you take a look at my article, https://codeshelper.com/a/11.

to see if the three values of the selectedOptions array can correspond to the options value, but there should be nothing else

have you solved this problem

Previous: In Javascript, how to control data contention if the event listener is asynchronous?

Next: Webstorm automatically compiles the .map file generated by scss how to prevent it from generating

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