Element UI 中国省市区级联数据

使用方法

1.安装

npm安装

npm install element-china-area-data -S

或者yarn安装

yarn add element-china-area-data

2.使用页面引入

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

注意:
provinceAndCityData  是省市二级联动数据(不带“全部”选项)
regionData  是省市区三级联动数据(不带“全部”选项)
provinceAndCityDataPlus  是省市区三级联动数据(带“全部”选项)
regionDataPlus  是省市区三级联动数据(带“全部”选项)
“全部” 选项绑定的 value 是空字符串””
CodeToText  是个大对象,属性是区域码,属性值是汉字
用法:CodeToText[‘110000’]输出北京市
TextToCode  是个大对象,属性是汉字,属性值是区域码
用法:TextToCode[‘北京市’].code输出110000,
TextToCode[‘北京市’][‘市辖区’].code输出110100,
TextToCode   [‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

3.具体事例

① 省市二级联动(不带“全部”选项)

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

② 省市二级联动(带“全部”选项)

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

4.绑定value格式

value是区域码"110000"

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » Element UI 中国省市区级联数据

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活