mint-ui 通过popup和picker实现三级联动（编辑时设置默认值）

成果预览：

准备工作：

请有针对性的查看以下文档：vue组件以及父子组件传值、mint-ui中的popup和picker。（本文不涉及，请自行查阅）

省市区三级数据源：https://github.com/artiely/Administrative-divisions-of-China  (由于业务需要，我使用的公司统一数据，但格式不变)

实现代码：

在对应的文件目录下新建：addressEdit.vue文件，以实现上放预览图页面。其中省市区联动部分引用公用组件：addressPicker.vue。

代码如下：

addressEdit.vue
<template>
    <div class="root editPsw"  :style="'min-height:'+allHeight +'px'">
      <div class="form">
          <mt-field class="underLine" placeholder="收货人姓名" v-model="name"></mt-field>
          <mt-field class="underLine" placeholder="手机号" type="tel" v-model="phone"></mt-field>
          <addressPicker class="underLine" :address="address" @choiceAddress='choiceAddress'></addressPicker>
          <mt-field placeholder="详细地址" type="textarea" rows="4" v-model="addressdetail"></mt-field>
      </div>
      <div class="btn">
        <p class="subEdit" v-if="type == '0'" @click="addSave()">保存</p>
        <p class="subEdit" v-else  @click="editSave()">确认修改</p>
      </div>
    </div>
</template>
<script>
import addressPicker from '../../../common/addressPicker.vue'
import { Toast } from 'mint-ui'

export default {
  data () {
    return {
      type: this.$route.params.type,
      allHeight: 0,
      addressID: '',
      name: '',
      phone: '',
      address: '省,市,区',
      addressdetail: '',
      IsDefault: 1
    }
  },
  components: {addressPicker},
  methods: {
    // 接受子组件的值
    choiceAddress (data) {
      this.address = data
    },
    addSave () {
    },
    editSave () {
    }
  },
  beforeMount () {
    this.type = Number(this.$route.params.type)
    if (this.type !== 0 && this.type !== 1 && this.type !== 2) {
      alert('警告：网址错误')
    }
    if (this.type === 1) {
      let addressInfo = JSON.parse(localStorage.getItem('addressInfo'))
      this.name = addressInfo.Name
      this.phone = addressInfo.Phone
      this.address = addressInfo.Province + ',' + addressInfo.City + ',' + addressInfo.Region
      this.addressdetail = addressInfo.Address
      this.IsDefault = addressInfo.IsDefault ? 1 : 0
      this.addressID = addressInfo.ID
    }
  },
  mounted () {
    this.allHeight = document.documentElement.clientHeight
  }
}
</script>
<style scoped lang='scss'>
.root {
  background-color: #faf9f7;
  padding-top: 0.265rem;
}
</style>

addressPicker.vue
<template>
    <div>
    <div class="page-content">
      <!-- <mt-cell title="省，市，区:" :value="areaString" is-link @click.native="handlerArea"></mt-cell> -->
      <mt-cell :title="areaString" :value="areaString" is-link @click.native="handlerArea"></mt-cell>
      <mt-popup v-model="areaVisible" class="area-class" position="bottom">
        <p>
          <span @click="cancel()">取消</span><span class="btn" @click="sub()">确定</span>
        </p>
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
      </mt-popup>
    </div>

    </div>
</template>
<script>
import data from '../../../static/city2.js'
var index = 0
var index2 = 0
// 初始化省
let province = data.map(res => {
  return res.name
})
// 初始化市
let city = data[index].children.map(res => {
  return res.name
})
// 初始化区
let area = data[index].children[index2].children.map(res => {
  return res
})
export default {
  props: ['address'],
  data () {
    return {
      areaVisible: false,
      areaString: '请选择',
      slots: [{
        flex: 1,
        values: province,
        className: 'slot1',
        textAlign: 'center'
      }, {
        divider: true,
        content: '-',
        className: 'slot2'
      }, {
        flex: 1,
        values: city,
        className: 'slot3',
        textAlign: 'center'
      }, {
        divider: true,
        content: '-',
        className: 'slot4'
      }, {
        flex: 1,
        values: area,
        className: 'slot5',
        textAlign: 'center'
      }]
    }
  },
  components: {},
  methods: {
    handlerArea () {
      this.areaVisible = true
      if (this.areaString === '省,市,区') { this.areaString = province[0] + ',' + city[0] + ',' + area[0] }
    },
    onValuesChange (picker, values) {
      let one = values[0]
      let two = values[1]
      index = province.indexOf(one)
      if (index >= 0 && province.length > 0) {
        city = data[index].children.map(res => {
          return res.name
        })
        picker.setSlotValues(1, city)
        two = values[1]
      }
      index2 = city.indexOf(two)
      if (index2 >= 0 && city.length > 0) {
        area = data[index].children[index2].children.map(res => {
          return res
        })
        picker.setSlotValues(2, area)
      }
      this.areaString = values.join(',')
      this.$emit('choiceAddress', this.areaString)
    },
    sub () {
      this.$emit('choiceAddress', this.areaString)
      this.areaVisible = false
    },
    cancel () {
      this.areaVisible = false
    }
  },
  mounted () {
    this.areaString = this.address
  }
}
</script>
<style scoped lang='scss'>
@import "./base.scss";
.area-class {
  width: 100% !important;
  p {
    height: 1.066rem;
    padding: 0.165rem;
    line-height: 0.736rem;
    display: flex;
    justify-content: space-between;
    font-size: $base_fontSize;
    border: 1px solid #e6e6e6;
    span {
      padding: 0 0.5rem;
    }
    .error {
      // background-color: #f7b500;
      color: #f7b500;
      // border: 1px solid #f7b500;
    }
    .btn {
      @extend .error;
      font-size: px2em(15, 16);
    }
  }
}
</style>

 

以上代码并不算完。你会发现此时三级联动已经可以了，并可以进行地址的添加，但是编辑的时候如何设置默认值（预览图3）

思路就是如果当前页面是编辑页面。那么重新对以下三个参数进行修改

思路：拿到父组件传过来的省市区，然后去判断当前省市区在三个数组中的索引值分别是什么，对应在data中的slots中设置 defaultIndex， value两个参数用于设置默认索引和默认值。如图：