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

本文主要是介绍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.Namethis.phone = addressInfo.Phonethis.address = addressInfo.Province + ',' + addressInfo.City + ',' + addressInfo.Regionthis.addressdetail = addressInfo.Addressthis.IsDefault = addressInfo.IsDefault ? 1 : 0this.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 = trueif (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）

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