Element UI 中国省市区级联数据三级联动

Element UI 中国省市区级联数据

前段时间刚用 有赞团队的 Vant UI 写了移动端的省市区三级联动（https://blog.youkuaiyun.com/Leon_940002463/article/details/99831063），这里给大家推荐一个 PC端的用咱们饿了吗团队的Element UI 来写的 省市区三级联动插件。

详细地址如下： https://www.npmjs.com/package/element-china-area-data

使用方法:

1.先安装

npm install element-china-area-data -S

2.在当前页面引入

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

1.provinceAndCityData是省市二级联动数据（不带“全部”选项）
2.regionData是省市区三级联动数据（不带“全部”选项）
3.provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
4.regionDataPlus是省市区三级联动数据（带“全部”选项）
5."全部"选项绑定的value是空字符串""
6.CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市
7.TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105

具体事例：

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

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

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

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </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>

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

<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>

4.省市区三级联动（带“全部”选项）

<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>

统一说明：

1. 在 handleChange 函数中打印的值是 你选中的 省市区三者的区域码的一个结果集 “110000”

2. 在这个函数中 你打印value 和打印 this.selectedOptions 结果是一样的。

自己做的案例：

<template>
    <div class="step-panel shu-ru-message">
        <div class="title">请输入办卡人（儿童）信息</div>
        <div class="keyboard">
          <el-form label-position="right" label-width="80px" :model="formShuRuMessage">
            <el-form-item label="姓名" class="yanZhenMaInput">
                <el-input v-model="formShuRuMessage.name" class="yanZhenMa"></el-input>
            </el-form-item>
            <el-form-item label="儿童身份证号">
                <el-input type="tel"
                maxlength="11"
                minlength="11"
                v-model="formShuRuMessage.number"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="formShuRuMessage.sex"></el-input>
            </el-form-item>
            <el-form-item label="出生年月">
                <el-date-picker
                v-model="formShuRuMessage.date"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
                placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="formShuRuMessage.age"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-cascader
                  size="large"
                  :options="options"
                  v-model="selectedOptions"
                  @change="handleChange">
                </el-cascader>
            </el-form-item>
          </el-form>
        </div>

    </div>
</template>

<script>
  import * as log from 'loglevel'
  import vEvents from '../../utils/v_events'
  import { regionData,CodeToText } from 'element-china-area-data'


  export default {
    name: 'shu-ru-message',

    components: {
     
    },

    data () {
      return {
       formShuRuMessage: {},
       options: regionData,
       selectedOptions: []
      }
    },

    methods: {
     handleChange (value) {
        log.info(value,'选中地址')
        log.info(CodeToText[value[0]]+CodeToText[value[1]]+CodeToText[value[2]],'选中地址')
        log.info(this.selectedOptions,'selectedOptions')
        log.info(this.options,'options')
        let addressStr = CodeToText[value[0]]+'/'+CodeToText[value[1]]+'/'+CodeToText[value[2]]
        log.info(addressStr,'addressStr')
        log.info(this.formShuRuMessage,'formShuRuMessage')
        this.formShuRuMessage.address = addressStr
        log.info(this.formShuRuMessage,'formShuRuMessage')
      

      }
    }
  }
</script>
<style >
    .shu-ru-message .el-form-item__content {
        margin-left: 100px !important;
    }
    .shu-ru-message .el-form-item__label {
       width: 100px !important;
    }
    .shu-ru-message .keyboard {
       margin: 1rem auto;
       width: 25rem;
    }
</style>>