Detailed explanation of the tutorial on selecting components in vue area

Overview

It is mainly used for the operation of regional data across the country, including the three-level linkage of provinces, cities and districts, and the addition and deletion of regional data; when operating regional data, a tree-shaped regional selection component has been used before, but because it is slow to render when operating a large amount of regional data, we changed to another data display form and interaction form, thus having this component.

Note: This component is a component

demo

Please click here to experience it for a fresh experiencedemo

API

Props

Events

Detailed description

Props

area

The area parameter is a required option, indicating the region data when component initialization and can be empty. area is an array of multiple objects, where the data structure of each object is as follows:

...
area: [
 {Name: 'Beijing', ID: '01'},
 {Name: 'Nanjing', ID: '0401'},
 {Name: 'Xihu District', ID: '060105'}
],
...

Because later in actual use, I found that sometimes the background will only return the ID value of one region, so I have optimized it here and only the ID value can be passed in, such as this:

...
area: [
 {ID: '01'},
 {ID: '0401'},
 {ID: '060105'}
],
...

selected

selected is an event published inside the component. You can subscribe to this event outside the component to get the value it returns. This value is all the regions currently selected by the component. The returned value is an array composed of multiple objects containing region data. The data structure is the same as the area parameter.

Simple example

<div>
  <addressmap :area="area" @selected="selected"></addressmap>
</div>

Install and use

npm install adc-addressmap

If used as a global component

//In the project entrance fileimport Vue from 'vue'
import Addressmap from 'adc-addressmap'
('Addressmap', Addressmap)
If as a local component
//In a componentimport Addressmap from 'adc-addressmap'
export default {
...
 components: { Addressmap},
...
}

Summarize

The above is a detailed explanation of the vue area selection component tutorial introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!