Mint-UI Picker 三级联动

 效果：

html：

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

 JS:

  import { Picker } from 'mint-ui';
  import myaddress from '../../js/pca-code.json'     //引入省市区数据
export default {
  data () {
    return {
      msg: '创建地址',
      slots: [
        {
          flex: 1,
          values: myaddress,
          defaultIndex: 10,
          className: 'slot1',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: myaddress[0].children,
          defaultIndex: 0,
          className: 'slot3',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot4'
        }, {
          flex: 1,
          values: myaddress[0].children[0].children,
          defaultIndex: 0,
          className: 'slot5',
          textAlign: 'center'
        }
      ]
    }
  },
  methods: {
    onValuesChange (picker, values) {
      console.log(values)
      if (!values[0]) {
        this.$nextTick(() => {
          if (this.myAdress) {
            // 赋默认值
          } else {
            picker.setValues([myaddress[0], myaddress[0].children[0], myaddress[0].children[0].children[0]])
          }
        })
      } else {
        picker.setSlotValues(1, values[0].children)
        let town = []
        if (values[1]) {
          town = values[1].children
        }
        picker.setSlotValues(2, town)
      }
    }
  }
}

 pca-code.json 来自：https://github.com/artiely/Administrative-divisions-of-China

参考:https://www.cnblogs.com/zling-gnilz/p/7987796.html