How does elementUI el-cascader handle multiple data loading on demand elegantly?

topic description

I have a city cascade selection function here, but when I use el-cascader, I find that it is very troublesome to deal with loading data on demand, and the government does not provide a brief introduction. I did not find a satisfactory solution for the problems related to searching on the Internet page. I do not know if you have a concise method.

related codes

</span>

<br> <br> <br> ...

:

[
    {
        id: 1, 
        pid: 2, 
        name: "", 
        index: 0, 
        children: [{
            id: 11, 
            pid: 21, 
            name: "", 
            index: 0, 
            children: [{
                id: 111, 
                pid: 211, 
                name: "/", 
                index: 0, 
                children: [{}]
            }]
        }]
    }
]

here comes the problem

when you click [Tianjin], the change method can only get the index:0, update children of Tianjin: this.list_ linkage[ Val]. Children = res.body.data
when you click [Heping Zone], the change method can only get the index:0, update children of Heping District: this.list_ Linkageval []. Childrenval]. Children = res.body.data
in turn, the back-end data is easy to obtain, but the foreground data cannot be processed. Because the parameter in the change return method is the value corresponding to the value defined in props, it is not the current row data, so there is no way to deal with it.

expected results

do you have a better way to deal with a lot of data and use el-cascader gracefully?
this is not borrowlism either. I"d like to discuss with you how el-cascader handles multiple data loading on demand.

Jan.25,2022

this method is already very convenient. In your way of writing, as long as the subitems in the children returned by res.body.data also contain children , selecting the subitems will still trigger the method change . I don't know that you here can only deal with the second-level data, but there is no way to deal with the third-and fourth-level data where to get the conclusion
and the setTimeout in the official example. In practical use, it is not necessary to use


now the official has provided, lazy, and lazyLoad to achieve this kind of dynamic loading. But it seems unable to initialize the default value. I don't know if you have solved it

.
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-1bef811-31c8a.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-1bef811-31c8a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?