Shulou(Shulou.com)05/31 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.