mint-ui 做省市选择组件

省市的数据是动态的,其实不是动态的更好搞

  <!-- 省市选择 -->
      <mt-popup
        v-model="popupVisible"
        position="bottom" class="lx-popup" >
         <mt-picker :slots="addressSlots" value-key="name" @change="onAddressChange" :visible-item-count="3" ></mt-picker>
      </mt-popup>

import { Toast, Indicator, Picker, Popup } from 'mint-ui'
 popupVisible: false,
addressSlots: [],
 methods:{
    openCity () {
      this.popupVisible = true
      Indicator.open('正在获取数据...')
    },
    onAddressChange (picker, values) {
      for (let i = 0; i < this.getAllAddress.length; i++) {
        if (values[0].id === this.getAllAddress[i].id) {
          this.privince = values[0].name
          picker.setSlotValues(1, this.getAllAddress[i].cities)
          break
        }
      }
      if (values[0] !== values[1]) {
        this.addressFalse = [{ province: values[0], city: values[1] }]
      } else {
        this.addressFalse = [{ province: values[0], city: values[1] }]
      }
      this.city = values[0].name
      this.searchData.city = this.city
      this.getStatistics()
    }
  }
}
created () {
    mapCityNew().then(res => {
      if (this.department.codeNo === '全部') {
        this.searchData.teamCode = ''
      }
      if (res.status === 200) {
        Indicator.close()
        this.getAllAddress = res.data.data
        this.addressSlots = [
          {
            flex: 1,
            values: this.getAllAddress,
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['广州'],
            className: 'slot3',
            textAlign: 'center'
          }
        ]
      } else {
        Toast({
          message: res.data.message || '数据获取失败',
          iconClass: 'icon icon-warning',
          duration: 3000
        })
      }
    })
  },

一开始可以在created里面去获取数据

value-key="name"表示获取的动摇数据的名字是name