Awesome

iview-area

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

English Document 线上DEMO

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

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

install 安装

    npm install iview-area --save

use 使用

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

config 配置

al-selector:

补充说明：

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

- 传入空数组 []

al-cascader: