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

忘是亡心i 2022-04-13 15:17 461阅读 0赞

### 成果预览： ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70 2][] ###

### 准备工作： ###

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

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

### 实现代码： ###

在对应的文件目录下新建：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="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）

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181130114542998.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181130114529923.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70 2]: /images/20220413/ebdefe7e6f6a4e7e8a261eb8d811bed6.png
[https_github.com_artiely_Administrative-divisions-of-China]: https://github.com/artiely/Administrative-divisions-of-China
[Link 1]: https://download.csdn.net/download/snowbeatrain/10818936
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70 3]: /images/20220413/353c552b1a6d4f30b9c0e4ea66da03c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70 4]: /images/20220413/fe4c069e9fe64014baf5b33d64b66517.png