# 省市区修改组件

> 下拉框数据从库里查询 divisions_of_china 表
> 省市区数据存储格式

+---------+-----+------------+--------+--------+----------+
|code     |name |provinceCode|cityCode|areaCode|parentCode|
+---------+-----+------------+--------+--------+----------+
|11       |北京市  |NULL        |NULL    |NULL    |NULL      |
|1101     |市辖区  |11          |NULL    |NULL    |11        |
|110101   |东城区  |11          |1101    |NULL    |1101      |
|110101001|东华门街道|11          |1101    |110101  |1101     |
|110101002|景山街道 |11          |1101    |110101  |1101      |
+---------+-----+------------+--------+--------+----------+


查询出来之后转成tree 作为数据 (截取了一段数据)

```json
[
    {
        "code": "11",
        "name": "北京",
        "label": "北京",
        "value": "北京",
        "children":
        [
            {
                "code": "1101",
                "parentcode": "11",
                "name": "辖区",
                "label": "辖区",
                "value": "辖区",
                "children":
                [
                  {
                    "code": "110101",
                    "parentcode": "1101",
                    "name": "东城区",
                    "label": "东城区",
                    "value": "东城区"
                  }
                ]}]}]
```

可传递参数
```js
props = {
    // 页面渲染内容  默认 省市区街道 四个 所以是4
    contexts: {
      type: Number,
      default: 3
    },
    placeholder: {
      type: String,
      default: '请选择省市区'
    },
    // small lage 输入框大小
    size: {
      type: String,
      default: undefined
    },
    // 类型 simple / undefined
    // simple 就是用的 cascader  不穿就是用的 自己封装的
    type: {
      type: String,
      default: undefined
    },
    // 框的样式
    inputStyle: {
      type: Object,
      default: () => {
      }
    },
    // 下拉框的样式
    dropdownStyle: {
      type: Object,
      default: () => {
        return {
          width: '35rem',
          padding: '1%'
        }
      }
    },
    // 标签的样式
    tagStyle: {
      type: Object,
      default: () => {
        return {
          fontSize: '0.88rem',
          width: '23%',
          textAlign: 'left',
          margin: '0.5%',
          cursor: 'pointer'
        }
      }
    },
    // 用于v-model 绑定
    value: {
      type: String,
      default: undefined
    },
    // 用于v-model 绑定 code :最后一级的code  address: 所有级拼接的地址
    valueType: {
      type: String,
      default: 'address'
    }
  }
```
