This post is a continuation of our previous discussion of cascader cascading dynamic load echo issues, and is linked at the end.

The following is the process of thinking and developing, not interested can directly read the use of documentation.

Github.com/zhuss/lazy-…

Why write another one?

Of course, it is not how high the ideological awareness is, nor because of the demand of the product, the product cried and said: “there are too many categories, I want a search function.”

At first, I refused, after all, the last time to solve the echo problem, spent a wave of hair is not much, but later thought, they are all workers, workers and workers should be a loving family.

Now that you’ve taken the pot, let’s figure it out.

At the beginning, I continued my original thinking. Since echo is ok, search should not be a problem, so I immersed myself in studying official documents and found two methods, filter-method and before-filter.

Filter-method is passed. This method is only used to determine whether a node matches during selection. It is not suitable for dynamic requests and data processing.

The before-filter method is fine, and is well documented.

The filter is stopped if false or reject is returned and Promise is rejected

If we request the backend interface based on the input value, get a set of options, and then dynamically update the options parameter based on the options, then we can filter out the node we want in the component.

According to this idea, the colleague after a lot of upsets, can realize the demand of dynamic search indeed.

However, there are shortcomings in this treatment.

The UI of the product design is not the same as the components of ElementUI, and the way they interact is not the same.

2. When dynamically updating options parameters, a lot of node data will be dynamically requested, and most of these nodes do not need to be displayed.

So, in order to solve these two problems, I fell into a reverie where I didn’t even want to look at ElementUI and manually polish a component (just think about it).

Since the original components in the UI did not meet the requirements of the product, we will write the UI, along with this idea, then we need to use a key thing, the cascade panel.

Because there are only a few things that make up the UI above.

Popover input box Popover search selection box cascading selection panel

The value of the cascading selection panel is only a data, that is, the path array of node IDS, so we must follow this value, and then iterate through options to get the corresponding label array, which is displayed in the input box.

You can also retrieve the value of a node by searching for the data.

Then we only need to dynamically request the nodes that need to be displayed according to the value changes and obtain the corresponding label.

That’s where the most important piece of code comes in.

/** Format id=>object */ async getObject(id) {let options = this.options; let nameArray = []; for (let i = 0; i < id.length; i++) { let index = options.findIndex(item => { return item[this.props.value] == id[i]; }); nameArray.push(options[index][this.props.label]); if (i < id.length - 1 && options[index].children == undefined) { let list = new Promise(resolve => { this.props.lazyLoad(id[i], list => { resolve(list); }); }); this.$set(options[index], "children", await list); options = options[index].children; } else { options = options[index].children; } } return { value: id, label: nameArray }; }Copy the code

Once you’ve solved this problem, you’re basically done with the echo.

For searching, use ElementUI’s component AutoComplete, and then wrap the component with cascader’s parameters, exposing the required parameters.

Complete code will not be put up, you can see the source warehouse.

In fact, in their own packaging components, will unconsciously learn or master some things, or more interesting.

For example, in order to solve the problem of misplacing the Popover Popover in multiple selections, I looked at Element’s source code and found that the Popover component has an updatePopper method.

Also, packaging components requires a lot of consideration, not complexity, but as comprehensive as possible.

Well, this article is written here, as for the applicability, I can not guarantee, at least a good solution to the cascader cascading dynamic loading deficiencies, and simplify the dynamic loading method, very convenient implementation of echo and search.

If this is exactly what you need, or you have a hunch that you will need it, you can collect it first. You can also communicate and discuss the shortcomings of the components, so that I can optimize and improve them.