This is the last time we discussed cascader The continuation of cascaded dynamic loading echo problem .
Here's the thinking and development process , If you are not interested, you can look directly at the usage document .
Why write another one ？
Of course, it's not how high the ideological awareness is , It's not because of the demand for the product , The product cries and chirps ：“ There are too many categories , I want to have a search function .”
At first I refused , After all, in order to solve the echo problem last time , It took a wave of hair that wasn't much , But think about it later , They are all workers , Migrant workers and migrant workers should be family members who love each other .
Now that you take this pot , Then find a way to solve it .
In the beginning , Continue the original idea , Since echo can , That search should be no problem , So I went to study the official documents , And then I found out filter-method and before-filter These two methods .
After I tried, I just pass It fell off filter-method, This is just to judge whether the nodes match when selecting , Not suitable for dynamic request and data processing .
and before-filter The method is OK , And the documentation is clear .
Hook before screening , The parameter is the input value , If returns false Or return Promise And be reject, Stop filtering
If we request the back-end interface according to the input value in the method , Get a set of alternatives , And then dynamically update our options Parameters , Then we can filter out the nodes we want from the components , As for dynamic updates options Methods , It can be similar to the echo logic in the previous article .
So this is the way to think about it , After a lot of tumultuous work , It can really meet the needs of dynamic search .
however , There are some shortcomings in this way .
1、 Product design UI and ElementUI The components of are not consistent , The way of interaction is different .
2、 In dynamic update options Parameters will dynamically request a lot of node data , Most of these nodes don't need to be displayed .
therefore , To solve these two problems , I'm lost in meditation again , I don't even want to see ElementUI Manually roll up a component （ Just think about it ）.
Now that the original component is in UI We haven't met the needs of our products , Let's write this ourselves UI Well , Follow this line , Then we need to use a key thing , Cascading panels .
Because the picture above UI There are just a few things that are part of .
Search selection box
Cascade selection panel
The value of the cascade selection panel is just a piece of data , That is, nodes id Path array for , Then we have to base on this value , Then traverse options Get the corresponding label Array of , In the input box .
You can also get the value of a node by searching the data you get .
So we just need to change the value , Dynamically request the node of requirement presentation , Get the corresponding label that will do .
That solved the problem , Basically, the echo has been implemented .
As for search , Direct use ElementUI The components of autocomplete That's all right. , Finally, it's copying cascader The parameters encapsulate the , Just expose the parameters you need .
Actually , When you encapsulate your own components , I will learn or master some things unconsciously , It's more interesting .
such as , In order to solve the problem of multiple choice Popover Pop up box dislocation problem , I saw Element Source code , Find out Popover The component has a updatePopper Method .
and , There are many issues to consider when packaging components , It's not that complicated , It's to be as comprehensive as possible .
Okay , That's all for this one , As for applicability , I can't guarantee , At least it's a good solution cascader The disadvantages of cascading dynamic loading , And it simplifies the method of dynamic loading , Very convenient implementation of the echo and search .
If that's what you need , Or you have a hunch that you will need , You can collect it first , We can also exchange and discuss the shortcomings of components , So that I can improve .