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

原文链接： 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

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

文件列表	JSON	CSV
省级（省份、直辖市、自治区）	provinces.json	provinces.csv
地级（城市）	cities.json	cities.csv
县级（区县）	areas.json	areas.csv
乡级（乡镇、街道）	streets.json	streets.csv
村级（村委会、居委会）	villages.json	villages.csv

文件列表	普通	带编码
“省份、城市” 二级联动数据	pc.json	pc-code.json
“省份、城市、区县” 三级联动数据	pca.json	pca-code.json
“省份、城市、区县、乡镇” 四级联动数据	pcas.json	pcas-code.json
“省份、城市、区县、乡镇、村庄” 五级联动数据	-	-

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