编程知识 cdmana.com

Element UI cascade dynamic loading echo and search, see this is enough

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 .

github.com/zhuss/lazy-cascader

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 .

Input box
Popover pop-up
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 .

Click to see more

版权声明
本文为[osc_ l8yszczz]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225112343207U.html

Scroll to Top