How to realize the interaction of provinces, cities and regions based on element-china-area-data plug-in in vue
This article mainly explains "vue based on element-china-area-data plug-in how to achieve provincial, municipal and regional interaction", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "vue based on the element-china-area-data plug-in how to achieve provincial, municipal and regional interaction" bar!
Preface
Front-end development students should know that provinces, cities and regions in the daily development of a lot of use, today to share with you a useful plug-in-element-china-area-data.
Install the npm install element-china-area-data-Scnpm install element-china-area-data-S code sample import {regionData} from "element-china-area-data"; / / introduce export default {data () {return {options: regionData,// selection format provinces: [], / / provincial and municipal binding array} }, methods: {/ / event triggered handleChange (e) {console.log (e, "selected code value");},},}
The element-china-area-data plug-in is mainly divided into four presentation formats:
ProvinceAndCityData
ProvinceAndCityDataPlus
RegionData
RegionDataPlus
The following is the format of the display when setting different attributes:
1. ProvinceAndCityData is provincial and municipal linkage data without the word "all". When the value of options is provinceAndCityData, it is shown as follows:
2. ProvinceAndCityDataPlus is the provincial and municipal linkage data and displays the word "all" option. When the value of options is provinceAndCityDataPlus, it is shown as follows:
3. RegionData is the three-level linkage data of provinces, cities and regions without the word "all". When the value of options is regionData, it is shown as follows:
4. RegionDataPlus is the three-level linkage data of provinces, cities and regions and displays the word "all" option. When the value of options is regionDataPlus, it is shown as follows:
Note: when the "all" option is selected, the bound value value is an empty string.
Case provincial and municipal secondary linkage (without "all" option): import {provinceAndCityData} from 'element-china-area-data' export default {data () {return {options: provinceAndCityData, selectedOptions: []}} Methods: {handleChange (value) {console.log (value)} provincial and municipal secondary linkage (with "all" option): import {provinceAndCityDataPlus} from 'element-china-area-data' export default {data () {return {options: provinceAndCityDataPlus, selectedOptions: []}} Methods: {handleChange (value) {console.log (value)} provincial and municipal three-level linkage (without "all" option): import {regionData} from 'element-china-area-data' export default {data () {return {options: regionData, selectedOptions: []}} Methods: {handleChange (value) {console.log (value)} provincial and municipal three-level linkage (with "all" option): import {regionDataPlus} from 'element-china-area-data' export default {data () {return {options: regionDataPlus, selectedOptions: []}} Methods: {handleChange (value) {console.log (value)} so far I believe that everyone has a deeper understanding of "vue based on element-china-area-data plug-in how to achieve provincial, municipal and regional interaction", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
