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

关于联动方法来自: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

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

文件列表JSONCSV
省级(省份、直辖市、自治区)provinces.jsonprovinces.csv
地级(城市)cities.jsoncities.csv
县级(区县)areas.jsonareas.csv
乡级(乡镇、街道)streets.jsonstreets.csv
村级(村委会、居委会)villages.jsonvillages.csv
文件列表普通带编码
“省份、城市” 二级联动数据pc.jsonpc-code.json
“省份、城市、区县” 三级联动数据pca.jsonpca-code.json
“省份、城市、区县、乡镇” 四级联动数据pcas.jsonpcas-code.json
“省份、城市、区县、乡镇、村庄” 五级联动数据--

提示:需要打包下载全部文件,请看 Releases

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值