一款基于Vue框架和iView-UI组件库开发的城市级联组件，数据包含中国的省(直辖市)、市、县区和乡镇街，数据来源area-data

English Document 线上DEMO

iview-area有两种形式的级联:

• 下拉菜单(基于iview的Select组件)
• 级联选择(基于iview的Cascader组件)

 npm install iview-area --save 

在main.js中写入下面的代码

 import iviewArea from 'iview-area'; import Vue from 'vue'; Vue.use(iviewArea);

接下来，你就可以在页面中使用iview-area了

<template> <al-selector v-model="res_s"/> <al-cascader v-model="res_c"/> </template> <script>  export default {  data () {  return {  res_s: [],  res_c: []  }  }  } </script>

data-type数据格式补充说明:

• data-type="all"时，返回数据格式如下：

  [ { code: '130000', name: '河北省' }, { code: '130100', name: '石家庄市' } ] 

• data-type="name"时，返回数据格式如下：

  ['河北省', '石家庄市'] 

• data-type="code"时，返回数据格式如下：

  ['130000', '130100'] 

v-model属性补充说明:

• 传入名称数组，若所设地方名称未找到或地方所属关系不对，则显示该等级列表中第一个地方，若数组地方个数少于城市及联选择器的等级数目，则后面缺省的地方名默认已列表中第一个地方显示；且如果设置了数组且不为空，则每次选择一个等级的地方后下面级别的选择器的列表都会更新，且默认选中的为对应列表中第一个地方

  ex: ['河北省', '长春市']

- 传入编号数组，若所设编号未找到对应地方或地方所属关系不对，则显示该等级列表中第一个地方，规则同上 

ex: ['130000', '120100']

- 传入空数组 []