vue 中国省市区级联数据 三级联动

vue 中国省市区级联数据 三级联动

1. 安装插件 npm install element-china-area-data@5.0.2 -S 当前版本以测试，可用。
2. 组件中使用了 element-ui, https://element.eleme.cn/#/zh-CN/component/installation 库 请注意安装。
3. 插件文档 https://www.npmjs.com/package/element-china-area-data
4. 先上图
   
   

5. 在components文件夹下面新建 mpAreaSelect.vue

<template>
  <el-cascader
    :options="options"
    :disabled="disabled"
    :placeholder="placeholder"
    :value="selectedOptions"
    @change="handleChange"
    :clearable="clearable"
  >
  </el-cascader>
</template>

<script>
import  {
  provinceAndCityDataPlus,
  regionData,
  TextToCode,
  CodeToText,
} from 'element-china-area-data'
export default {
  name: 'mpAreaSelect',
  computed: {
    selectedOptions() {
      let selected = this.selected.filter((item) => item != '' && item != null)
      let len = selected.length
      let textArr = []
      switch (len) {
        case 1:
          if(TextToCode[selected[0]]){
            textArr.push(TextToCode[selected[0]].code)
          }else{
            textArr = []
          }
          
          break
        case 2:
         if(TextToCode[selected[0]]){
            textArr.push(TextToCode[selected[0]].code)
          }else{
            textArr = []
          }
           if(TextToCode[selected[0]] && TextToCode[selected[0]][selected[1]]){
            textArr.push(TextToCode[selected[0]][selected[1]].code)
          }else{
            textArr = []
          }
         
          break
        case 3:
           if(TextToCode[selected[0]]){
            textArr.push(TextToCode[selected[0]].code)
          }else{
            textArr = []
          }
           if(TextToCode[selected[0]] && TextToCode[selected[0]][selected[1]]){
            textArr.push(TextToCode[selected[0]][selected[1]].code)
          }else{
            textArr = []
          }
          if(TextToCode[selected[0]] && TextToCode[selected[0]][selected[1]] && TextToCode[selected[0]][selected[1]][selected[2]]){
            textArr.push(TextToCode[selected[0]][selected[1]][selected[2]].code)
          }else{
            textArr = []
          }
          break
        default:
          break
      }
      return textArr
    },

    options() {
      switch (this.level) {
        case 2:
          return provinceAndCityDataPlus
        case 3:
          return regionData
        default:
          return regionData
      }
    },
  },

  props: {
    selected: {
      type: Array,
      default: [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '',
    },
    level: {
      type: Number,
      default: 3,
    },
    clearable:{
      type: Boolean,
      default: false,
    }
  },
  methods: {
    handleChange(value) {
      console.log(TextToCode)
      console.log(CodeToText)
      console.log(provinceAndCityDataPlus)
      console.log(regionData)
      console.log(value)
      this.$emit(
        'change',
        value.map((item) => CodeToText[item]),value
      )
    },
  },
}
</script>

<style>
</style>

6. 组件的使用

<template>
  <div>
    <div>
      <div>请选择地区：</div>
      <mp-area-select
        style="width: 400px"
        :selected="selected"
        placeholder="请选择地区"
        @change="changeAddress"
      ></mp-area-select>
      <div>回显地区：</div>
      <mp-area-select
        style="width: 400px"
        :selected="selectedView"
      ></mp-area-select>
    </div>
  </div>
</template>
<script>
import MpAreaSelect from '@/components/mpAreaSelect';
export default {
  components:{
    MpAreaSelect
  },
  data() {
    return {
      selected:[],
      selectedView:[],
    };
  },
  mounted(){
    this.$nextTick(()=>{
      this.selectedView = ["北京市", "市辖区", "朝阳区"]
    })
  },
  methods: {
    changeAddress(arr,code) {
      console.log(arr,77777777)
      console.log(code,88888888)
    },
  },
};
</script>

7. 搞定！组件以及示例可直接复制使用！
8. 另外 省市区JSON数据串 已经放在博客顶部，可自行下载后，自定义组件。