Element UI 中国省市区级联数据

[TOC]

安装城市数据：

npm install element-china-area-data -S

使用

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

服务端用法

const { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } = require('element-china-area-data/dist/app.commonjs')

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

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

<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 () {
        var loc = "";
        for (let i = 0; i < this.selectedOptions.length; i++) {
            loc += CodeToText[this.selectedOptions[i]];
        }
        console.log(loc)//打印区域码所对应的属性值即中文地址
      }
    }//或者下面的写法
      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 { 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>

绑定value格式

value是区域码"110000"

音乐网站项目中的应用

html部分文件

<el-form :model="registerForm" ref="registerForm" label-width="80px">
<el-form-item prop="location" label="地区" size="mini">
  <el-cascader size="large" :options="options" v-model="selectedOptions"  @change="handleChange">   
  </el-cascader>
</el-form-item>
 </el-form>
   <span slot="footer">
 <el-button size="mini" @click="centerDialogVisible = false">取消</el-button>
  <el-button size="mini" @click="addSinger">确定</el-button>
    </span>

Js部分文件

<script>
import {setSinger} from '../api/index';
import {mixin} from '../mixins/index';
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
export default {
    mixins: [mixin],
    data(){
        return{
            centerDialogVisible: false,
             options: provinceAndCityData,
            selectedOptions: [],
            registerForm:{      //添加框
                name: '',
                sex: '',
                birth: '',
                location: null,
                introduction: ''
            }
        }
    }
    methods:{
        handleChange () {
        var loc = "";
        for (let i = 0; i < this.selectedOptions.length; i++) {
            loc += CodeToText[this.selectedOptions[i]];
        }
         this.registerForm.location = loc;//转换为中文赋值给location
      },
        //添加歌手
        addSinger(){
            let d = this.registerForm.birth
            let datetime = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()
            let params = new URLSearchParams()
            params.append('name',this.registerForm.name)
            params.append('sex',this.registerForm.sex)
            params.append('pic','/img/singerPic/user.png')
            params.append('birth',datetime)
            params.append('location',this.registerForm.location)
            params.append('introduction',this.registerForm.introduction)
            setSinger(params)
          .then((res) => {
                if(res.code == 1){
                    this.notify("添加成功","success");
                }else{
                    this.notify("添加失败","error");
                }
            })
            .catch(err => {
                console.log(err);
            });
            this.centerDialogVisible = false;
        }

    }
}
</script>

参考地址：