{"id":20533105,"url":"https://github.com/view-design/iview-area","last_synced_at":"2026-03-19T16:16:56.340Z","repository":{"id":74608643,"uuid":"206217954","full_name":"view-design/iview-area","owner":"view-design","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-03T06:15:09.000Z","size":5139,"stargazers_count":1,"open_issues_count":6,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-06T03:12:08.640Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/view-design.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-04T02:54:53.000Z","updated_at":"2020-11-09T02:39:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"b9fb6efd-2821-4324-9816-b035fdd42188","html_url":"https://github.com/view-design/iview-area","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/view-design/iview-area","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/view-design%2Fiview-area","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/view-design%2Fiview-area/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/view-design%2Fiview-area/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/view-design%2Fiview-area/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/view-design","download_url":"https://codeload.github.com/view-design/iview-area/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/view-design%2Fiview-area/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30384074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T14:10:17.325Z","status":"ssl_error","status_checked_at":"2026-03-11T14:09:37.934Z","response_time":84,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T00:18:44.657Z","updated_at":"2026-03-11T14:36:43.647Z","avatar_url":"https://github.com/view-design.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# iview-area\n[![npm](https://img.shields.io/npm/v/iview-area.svg)]()\n\n\u003e 一款基于Vue框架和iView-UI组件库开发的城市级联组件，数据包含中国的省(直辖市)、市、县区和乡镇街，数据来源[area-data](https://github.com/dwqs/area-data)\n\n**[English Document](https://github.com/iview/iview-area/blob/dev/READEME_EN.md)**\n**[线上DEMO](https://iview.github.io/iview-area/)**\n\niview-area有两种形式的级联: \n- 下拉菜单(基于iview的Select组件)\n- 级联选择(基于iview的Cascader组件)\n\n# install 安装\n```\n    npm install iview-area --save\n```\n# use 使用\n在main.js中写入下面的代码\n```javascript\n    import iviewArea from 'iview-area';\n    import Vue from 'vue';\n    Vue.use(iviewArea);\n```\n接下来，你就可以在页面中使用iview-area了\n```vue\n\u003ctemplate\u003e\n    \u003cal-selector v-model=\"res_s\"/\u003e\n    \u003cal-cascader v-model=\"res_c\"/\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n    export default {\n        data () {\n            return {\n                res_s: [],\n                res_c: []\n            }\n        }\n    }\n\u003c/script\u003e\n```\n# config 配置\n\n### al-selector:\n\n属性  |  说明  |  类型  |  默认值\n:-------: | -------  |  :-------:  |  :-------:\n\u003csmall\u003evalue\u003c/small\u003e|\u003csmall\u003e用于存放结果的数组，建议使用v-model来做双向绑定\u003c/small\u003e|Array|无\nv-model|用于存放结果的数组，选择了数据后会自动更新，可传入默认显示的数据，详见表格下补充|Array|无\ngutter|设置各级别选择器之间的距离，单位px|String \u0026#124; Number|10\nlevel|要显示的级别，如设为2则显示省、市和县，即3级，级别可设为0、1、2、3四级|String \u0026#124; Number|3\ndata-type|返回数据的类型，'all':城市编码和名称，'code':只返回编码，'name':只返回名称，数据格式请看表格下面的补充说明|String|all\nsearchable|是否可搜索，添加该属性则点击选择器后可输入名称搜索|Boolean|false\nsize|选择器尺寸，该属性同iview组件select的size属性，可选值为small，large，default|String|default\nauto|是否在选择一级之后自动选择之后所有等级的选择器（自动选中为列表第一项）|Boolean|false\nplaceholder|选择器未选择时显示的占位字符,若为字符串，则各级别选择器均使用该作为占位字符，若为数组，根据数组对应位置的字符串设置选择器占位字符，若数组元素少于级别数，缺省的则设为默认数组中对应的占位字符|Array \u0026#124; String|['请选择省', '请选择市', '请选择县区', '请选择街道']\nnot-found-text|无数据时显示的文字提示，规则同placeholder属性|Array \u0026#124; String|['无匹配市', '无匹配县区', '无匹配街道']\ndisabled|设置禁用整个级联选择器或某个级别的选择器，可只写``disabled``，也可写``:disabled=\"true\"``或``\"false\"``，或传入一个数组，如禁用二级和四级选择器则为``[1, 3]``，也可传入数值指定从指定级别开始禁用|Boolean \u0026#124; Array \u0026#124; Number|false\n\n事件  |  说明  |  返回值\n:-------: | -------  |  :-------:\non-change|选择完成后的回调，返回值此时已选的数据数组|data\n\n##### 补充说明：\n\n\u003e **data-type数据格式补充说明:**\n\u003e\n\u003e - data-type=\"all\"时，返回数据格式如下：\n\u003e   ```\n\u003e   [\n\u003e       {\n\u003e           code: '130000',\n\u003e           name: '河北省'\n\u003e       },\n\u003e       {\n\u003e           code: '130100',\n\u003e           name: '石家庄市'\n\u003e       }\n\u003e   ]\n\u003e   ```\n\u003e - data-type=\"name\"时，返回数据格式如下：\n\u003e   ```\n\u003e   ['河北省', '石家庄市']\n\u003e   ```\n\u003e - data-type=\"code\"时，返回数据格式如下：\n\u003e   ```\n\u003e   ['130000', '130100']\n\u003e   ```\n\u003e **v-model属性补充说明:**\n\u003e\n\u003e - 传入名称数组，若所设地方名称未找到或地方所属关系不对，则显示该等级列表中第一个地方，若数组地方个数少于城市及联选择器的等级数目，则后面缺省的地方名默认已列表中第一个地方显示；且如果设置了数组且不为空，则每次选择一个等级的地方后下面级别的选择器的列表都会更新，且默认选中的为对应列表中第一个地方\n\u003e   ```\n\u003e   ex: ['河北省', '长春市']\n\u003e   ```\n\u003e - 传入编号数组，若所设编号未找到对应地方或地方所属关系不对，则显示该等级列表中第一个地方，规则同上\n\u003e   ```\n\u003e   ex: ['130000', '120100']\n\u003e   ```\n\u003e - 传入空数组 []\n\n### al-cascader:\n\n属性  |  说明  |  类型  |  默认值\n:-------: | -------  |  :-------:  |  :-------:\n\u003csmall\u003evalue\u003c/small\u003e|\u003csmall\u003e用于存放结果的数组，建议使用v-model来做双向绑定\u003c/small\u003e|无|无\nv-model|用于存放结果的数组，选择了数据后会自动更新|无|无\nlevel|要显示的级别，如设为2则显示省、市和县，即3级，级别可设为0、1、2、3四级|String \u0026#124; Number|3\ndata-type|返回数据的类型，'all':城市编码和名称，'code':只返回编码，'name':只返回名称，数据格式同al-selector补充说明|String|all\nsize|选择器尺寸，该属性同iview组件cascader的size属性，可选值为small，large|String|无\nplaceholder|选择器未选择时显示的占位字符|String|'请选择']\ndisabled|是否禁用选择器|Boolean|false\nrender-format|选择后展示的函数，用于自定义显示格式|Function|``label =\u003e label.join(' / ')``\n\n事件  |  说明  |  返回值\n:-------: | -------  |  :-------:\non-change|选择完成后的回调，返回值此时已选的数据数组|data\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fview-design%2Fiview-area","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fview-design%2Fiview-area","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fview-design%2Fiview-area/lists"}