码迷,mamicode.com
首页 > 其他好文 > 详细

Mint-UI Picker 三级联动

时间:2018-09-16 21:35:05      阅读:669      评论:0      收藏:0      [点我收藏+]

标签:地址   数据   img   git   methods   eth   efault   key   name   

 效果:

技术分享图片

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

 

Mint-UI Picker 三级联动

标签:地址   数据   img   git   methods   eth   efault   key   name   

原文地址:https://www.cnblogs.com/yunspider/p/9657422.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!