#效果

预览地址：https://huoguozhang.github.io/my-district/dist/

github:https://github.com/huoguozhang/my-district

#介绍：

vue + element-ui (el-select+el-option)的地区选择组件 实现了：省+市+区 #说明：

#使用

1 引入

// es6
// 全局
// main.js
import myDistrict from 'my-district'
Vue.use(myDistrict)
// 局部
// xxx.vue
<script>
import myDistrict from 'my-district'
export default {
    components: {
         myDistrict
     }
}
</script>

2 使用

<template>
      <myDistrict
        :province.sync="province"
        :city.sync="city"
        :area.sync="area"
      ></myDistrict>
</template>

3. 参数说明 myDistrict Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值| |:------: |:------: |:-------:|:---------:|:---------:| | province | 省 | string | -- | -- | | city | 市 | string | -- | -- | | area | 区 | string | -- | -- | | layoutLevels | 显示级别 1省2市3区 1 2 3 自由组合，但前面的值必须提供 | array | 1,2,3 构成的数组 | [1,2,3] | |uint|样式长度单位|string|px,%等|px |size|element组件的size|string|mini,small,medium|--| |selectWidth|select组件的宽度|number|--|200| |spaceWidth|两个select的间隙|number|--|24|

4 其他使用可与调取内置函数

|名称|说明|参数用法| |:--------:|:-------------------:|:-----------:| |provinceArr| 省列表| --| |getCitys|获取市列表，提供省中文名| getCitys('浙江省')| |getArea|获取区县列表，提供省市中文名|getAreas('浙江省', '杭州市')|

import { getAreas, getCitys, provinceArr } from 'my-district'

5 和ui库的form表单结合,此处用的element,你可以使用其他的ui库，校验规则由你自己定义。

<template>
  <div id="app">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item prop="district">
        <myDistrict
          :province.sync="ruleForm.district.province"
          :city.sync="ruleForm.district.city"
          :area.sync="ruleForm.district.area"
        ></myDistrict>
      </el-form-item>
      <el-button @click="submitForm('ruleForm')">提交</el-button>
    </el-form>
  </div>
</template>

<script>
let checkDistrict= (rule, {province, city, area}, cb) => {
  if (!province) {
    cb(new Error('请选择省'))
  } else if (!city) {
    cb(new Error('请选择市'))
  } else if (!area) {
    cb(new Error('请选择区'))
  } else {
    cb()
  }
}
export default {
  name: 'app',
  data() {
    return {
      ruleForm: {
        district: {
          province: '',
          city: '',
          area: ''
        }
      },
      rules: {
        district: [
          {validator: checkDistrict, trigger: 'blur'},
          {validator: checkDistrict, trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          // sconsole.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

#question:

1. 数据不对怎么办？ 可以更改china.json文件,可以删改某项。

...
        "name": "天津市",
        "child": [
            {
                "name": "天津市",
                "child": [
                    {"value":"和平区"},
                    {"value":"河东区"},
                    {"value":"河西区"},
                    {"value":"南开区"},
                    {"value":"河北区"},
                    {"value":"红桥区"},
                    {"value":"东丽区"},
                    {"value":"西青区"},
                    {"value":"津南区"},
                    {"value":"北辰区"},
                    {"value":"武清区"},
                    {"value":"宝坻区"},
                    {"value":"滨海新区"},
                    {"value":"宁河县"},
                    {"value":"静海县"},
                    {"value":"蓟州县"},
                    {"value":"xxx"} // 你需要增加的
                ]
            }
      ...

执行npm run make:area-json

2.其他问题可以提issue

huoguozhang 3.感谢

Orionwl和CutiePanther整理的地区json文件