Home

Awesome

iview-area

npm

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

English Document 线上DEMO

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

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:

属性说明 类型 默认值
<small>value</small><small>用于存放结果的数组,建议使用v-model来做双向绑定</small>Array
v-model用于存放结果的数组,选择了数据后会自动更新,可传入默认显示的数据,详见表格下补充Array
gutter设置各级别选择器之间的距离,单位pxString | Number10
level要显示的级别,如设为2则显示省、市和县,即3级,级别可设为0、1、2、3四级String | Number3
data-type返回数据的类型,'all':城市编码和名称,'code':只返回编码,'name':只返回名称,数据格式请看表格下面的补充说明Stringall
searchable是否可搜索,添加该属性则点击选择器后可输入名称搜索Booleanfalse
size选择器尺寸,该属性同iview组件select的size属性,可选值为small,large,defaultStringdefault
auto是否在选择一级之后自动选择之后所有等级的选择器(自动选中为列表第一项)Booleanfalse
placeholder选择器未选择时显示的占位字符,若为字符串,则各级别选择器均使用该作为占位字符,若为数组,根据数组对应位置的字符串设置选择器占位字符,若数组元素少于级别数,缺省的则设为默认数组中对应的占位字符Array | String['请选择省', '请选择市', '请选择县区', '请选择街道']
not-found-text无数据时显示的文字提示,规则同placeholder属性Array | String['无匹配市', '无匹配县区', '无匹配街道']
disabled设置禁用整个级联选择器或某个级别的选择器,可只写disabled,也可写:disabled="true""false",或传入一个数组,如禁用二级和四级选择器则为[1, 3],也可传入数值指定从指定级别开始禁用Boolean | Array | Numberfalse
事件说明返回值
on-change选择完成后的回调,返回值此时已选的数据数组data
补充说明:

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

v-model属性补充说明:

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

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

ex: ['130000', '120100']

- 传入空数组 []

al-cascader:

属性说明 类型 默认值
<small>value</small><small>用于存放结果的数组,建议使用v-model来做双向绑定</small>
v-model用于存放结果的数组,选择了数据后会自动更新
level要显示的级别,如设为2则显示省、市和县,即3级,级别可设为0、1、2、3四级String | Number3
data-type返回数据的类型,'all':城市编码和名称,'code':只返回编码,'name':只返回名称,数据格式同al-selector补充说明Stringall
size选择器尺寸,该属性同iview组件cascader的size属性,可选值为small,largeString
placeholder选择器未选择时显示的占位字符String'请选择']
disabled是否禁用选择器Booleanfalse
render-format选择后展示的函数,用于自定义显示格式Functionlabel => label.join(' / ')
事件说明返回值
on-change选择完成后的回调,返回值此时已选的数据数组data