vue基于element-china-area-data插件实现省市区联动

目录

前言安装代码样例案例省市二级联动（不带“全部”选项）:省市二级联动（带“全部”选项）:省市三级联动（不带“全部”选项）:省市三级联动（带“全部”选项）:

前言

} } }</script>

省市二级联动（带“全部”选项）:

<template>  <div id="app">    <el-cascader      size="large"      :options="options"      v-model="selectedOptions"      @change="handleChange"&guRzSjvAsBit;    </el-cascader>  </div></template> <script>  import { provinceAndCityDataPlus } from 'element-china-area-data'  export default {    data () {      return {        options: provinceAndCityDataPlus,        selectedOptions: []      }    },     methods: {      handleChange (value) {        console.log(value)      }    }  }</script>

省市三级联动（不带“全部”选项）:

<template>  <div id="app">    <el-cascader      size="large"      :options="options"      v-model="selectedOptions"      @change="handleChange">    </el-cascader>  </div></template> <script>  import { regionData } from 'element-china-area-data'  export default {    data () {      return {        options: regionData,        selectedOptions: []      }    },     methods: {      handleChange (value) {        console.log(value)      }    }  }</script>

省市三级联动（带“全部”选项）:

<template>  <div id="app">    <el-cascader      size="large"      :options="options"      v-model="selectedOptions"      @change="handleChange">    </el-cascader>  </div></template> <script>  import { regionDataPlus } from 'element-china-area-data'  export default {    data () {      return {        options: regionDataPlus,        selectedOptions: []      }    },     methods: {      handleChange (value) {        console.log(value)      }    }  }</script>