How to implement three-level linkage using Vue2

This article mainly introduces in detail how Vue2 imitates Taobao to realize the three-level linkage of provinces and municipalities. It has certain reference value. Interested friends can refer to

Three-level linkage. With the More and more aesthetics are emerging, and many companies are imitating Taobao's three-level linkage, which is good-looking and fashionable, so our company is the same... In order to make it easier to post code, I separated the json of provinces and cities written in the data Come out, download and paste it to use, the link is as follows: vue.json (This is directly a data, just put it into your vue2 project. (Because my project uses vue2, so other attributes and blog content are It matches. Please cooperate with the blog to download this json)).

First the page displays as follows:

#Then there will be a three-level linkage in our county-level area, as follows: (The following is a fragment, the background color has not been intercepted)

What this picture looks like and what form it appears in depends on your company's UI needs. Our company makes it a pop-up layer. . Then the background color is transparent. In order to save traffic, I only intercepted a section. The final display is as follows:

If your company has the same needs as ours, I hope this can help you. . The following is the three-level linkage code and css style written in the vue2 project: