功能介绍

• 支持两种UI风格：普通原生下拉列表，element-ui下拉列表；
• 支持仅读方式配置；
• 支持配置显示级别：显示省份，显示省份+城市，显示省份+城市+区县；
• 支持配置默认选中的省份、城市以及区县；

属性配置说明

| 属性名 | 默认值 | 取值说明 | | :------------: |:---------------:| :-----:| | readOnly | false | 仅读标识：boolean类型，true：仅读，false：可编辑 | | level | 3 | 显示级别：int类型，1：只显示省份，2：显示省份+城市，3：显示省份+城市+区县 | | useElementUI | false | 是否使用element-ui组件：boolean类型，true：使用element-ui下拉列表组件，false：使用原生select标签 | | province | 空 | 默认选中省份：string或int类型，string类型时为省份中文模糊查询，int类型时为省份code值，精确匹配 | | city | 空 | 默认选中城市：string或int类型，string类型时为城市中文模糊查询，int类型时为城市code值，精确匹配 | | area | 空 | 默认选中区县：string或int类型，string类型时为区县中文模糊查询，int类型时为区县code值，精确匹配 |

事件回调说明

| 事件 | 事件说明 | 参数说明 | | :------------: |:---------------:| :-----:| | provinceChange | 省份选择改变回调 | Object | | cityChange | 城市选择改变回调 | Object | | areaChange | 区县选择改变回调 | Object |

方法说明

| 方法 | 方法说明 | 参数说明 | | :------------: |:---------------:| :-----:| | getData | 获取当前选择的省份、城市、区县数据 | Object |

安装

npm install moretv-province --save

引用

import MtvProvince from 'moretv-province'
components:{MtvProvince},

<mtv-province useElementUI ref="mtvProvince" :province="'江西'" :city="360100" :area="360104" @provinceChange="provinceChange" @cityChange="cityChange" @areaChange="areaChange"></mtv-province>

获取组件数据

this.$refs.mtvProvince.getData()

组件返回的数据格式

{
    area:{required: true, code: 360104, name: "青云谱区"},
    city:{required: true, code: 360100, name: "南昌市"},
    province:{required: true, code: 360000, name: "江西省"}
}

required:表示该字段是否需要选择，主要针对直辖市没有区县以及台湾、香港、澳门没有城市及区县，即可不选择； true：代表有值，应该选择，false代表没有值，不选

备注

数据来源：2018年7月中华人民共和国县以上行政区划代码