mint-ui picker 实现省市区县三级联动单一市无法联动BUG解决

痛定思痛。 2021-10-15 07:45 226阅读 0赞

***关于联动方法来自：[https://www.cnblogs.com/zling-gnilz/p/7987796.html][https_www.cnblogs.com_zling-gnilz_p_7987796.html]***

下面代码留个备份

### **HTML:** ###

<mt-picker :slots="slots" value-key="name" @change="onValuesChange"></mt-picker>

### **JS :** ###

const address = [
      {
        "code": "001",
        "name": "省份1",
        "childs": [
          {
            "code": "001-1",
            "name": "城市1",
            "childs": [
              {
                "code": "001-1-1",
                "name": "城市1县城1"
              },
              {
                "code": "001-1-2",
                "name": "城市1县城2"
              }
            ]
          },
          {
            "code": "001-2",
            "name": "城市2",
            "childs": [
              {
                "code": "001-2-1",
                "name": "城市2县城1"
              },
              {
                "code": "001-2-2",
                "name": "城市2县城2"
              }
            ]
          }
        ]
      },
      {
        "code": "002",
        "name": "省份2",
        "childs": [
          {
            "code": "002-1",
            "name": "城市3",
            "childs": [
              {
                "code": "002-1-1",
                "name": "城市3县城1"
              },
              {
                "code": "002-1-2",
                "name": "城市3县城2"
              }
            ]
          },
          {
            "code": "002-2",
            "name": "城市4",
            "childs": [
              {
                "code": "002-2-1",
                "name": "城市4县城1"
              },
              {
                "code": "002-2-2",
                "name": "城市4县城2"
              }
            ]
          }
        ]
      },
      {
        "code": "003",
        "name": "省份3",
        "childs": [
          {
            "code": "003-1",
            "name": "城市5",
            "childs": [
              {
                "code": "003-1-1",
                "name": "城市5县城1"
              },
              {
                "code": "003-1-2",
                "name": "城市5县城2"
              }
            ]
          },
          {
            "code": "003-2",
            "name": "城市6",
            "childs": [
              {
                "code": "003-2-1",
                "name": "城市6县城1"
              },
              {
                "code": "003-2-2",
                "name": "城市6县城2"
              }
            ]
          }
        ]
      },
    ];

export default {
        name: 'app',
        data () {
            return {
                myAdress:null,
                slots: [
                    {
                      flex: 1,
                      values: address,
                      defaultIndex:10,
                      className: 'slot1',
                      textAlign: 'right'
                    }, {
                      divider: true,
                      content: '-',
                      className: 'slot2'
                    }, {
                      flex: 1,
                      values: address[0].childs,
                      defaultIndex:0,
                      className: 'slot3',
                      textAlign: 'left'
                    }, {
                      divider: true,
                      content: '-',
                      className: 'slot4'
                    }, {
                      flex: 1,
                      values: address[0].childs[0].childs,
                      defaultIndex:0,
                      className: 'slot5',
                      textAlign: 'left'
                    }
                ]
            }
        },
        methods: {
              onValuesChange(picker, values) {
                if(!values[0]){
                   this.$nextTick(()=>{
                        if(this.myAdress){
                             // 赋默认值
                        }else{
                             picker.setValues([address[0],address[0].childs[0],address[0].childs[0].childs[0]])
                        }
                   });
                }else{
    
                   ///解决单一市问题//
                   let slot3 = picker.getSlotValue(1);  //当前
                        // //省的数据变化后如果不相同，强制将市这一栏的数据定位到第一个
                        if (slot3) {
                            slot3 = slot3.code.substring(0, 2);
                            let now_slot3 = values[0].childs[0].code.substring(0, 2);
                            if (slot3 != now_slot3) {
                                picker.setSlotValue(1, values[0].childs[0]);
                            }
                        }
                   ///解决单一市问题//
    
                   picker.setSlotValues(1, values[0].childs);
                   let town = [];
                   if(values[1]){
                      town = values[1].childs;
                   }
                   picker.setSlotValues(2,town);
                }
    
              }
        }
    }

## ##

### **解决单一市无法联动问题，*****上面代码已加入*** ###

let slot3 = picker.getSlotValue(1);  //当前
    // //省的数据变化后如果不相同，强制将市这一栏的数据定位到第一个
    if (slot3) {
         slot3 = slot3.code.substring(0, 2);
         let now_slot3 = values[0].childs[0].code.substring(0, 2);
         if (slot3 != now_slot3) {
         picker.setSlotValue(1, values[0].childs[0]);
      }
    }

联动数据推荐：[https://github.com/modood/Administrative-divisions-of-China][https_github.com_modood_Administrative-divisions-of-China]

## 数据下载/无法使用请注意键名 ##

<table> 
 <thead> 
  <tr> 
   <th>文件列表</th> 
   <th>JSON</th> 
   <th>CSV</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>省级（省份、直辖市、自治区）</td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/provinces.json" rel="nofollow">provinces.json</a></td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/provinces.csv" rel="nofollow">provinces.csv</a></td> 
  </tr> 
  <tr> 
   <td>地级（城市）</td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/cities.json" rel="nofollow">cities.json</a></td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/cities.csv" rel="nofollow">cities.csv</a></td> 
  </tr> 
  <tr> 
   <td>县级（区县）</td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/areas.json" rel="nofollow">areas.json</a></td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/areas.csv" rel="nofollow">areas.csv</a></td> 
  </tr> 
  <tr> 
   <td>乡级（乡镇、街道）</td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/streets.json" rel="nofollow">streets.json</a></td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/streets.csv" rel="nofollow">streets.csv</a></td> 
  </tr> 
  <tr> 
   <td>村级（村委会、居委会）</td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/villages.json" rel="nofollow">villages.json</a></td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/villages.csv" rel="nofollow">villages.csv</a></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>文件列表</th> 
   <th>普通</th> 
   <th>带编码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>“省份、城市” 二级联动数据</td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/pc.json" rel="nofollow">pc.json</a></td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/pc-code.json" rel="nofollow">pc-code.json</a></td> 
  </tr> 
  <tr> 
   <td>“省份、城市、区县” 三级联动数据</td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/pca.json" rel="nofollow">pca.json</a></td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/pca-code.json" rel="nofollow">pca-code.json</a></td> 
  </tr> 
  <tr> 
   <td>“省份、城市、区县、乡镇” 四级联动数据</td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/pcas.json" rel="nofollow">pcas.json</a></td> 
   <td><a href="https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/pcas-code.json" rel="nofollow">pcas-code.json</a></td> 
  </tr> 
  <tr> 
   <td>“省份、城市、区县、乡镇、村庄” 五级联动数据</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

> 提示：需要打包下载全部文件，请看 [Releases][]。

[https_www.cnblogs.com_zling-gnilz_p_7987796.html]: https://www.cnblogs.com/zling-gnilz/p/7987796.html
[https_github.com_modood_Administrative-divisions-of-China]: https://github.com/modood/Administrative-divisions-of-China
[Releases]: https://github.com/modood/Administrative-divisions-of-China/releases