<template> <div class="address"> <section style="width:100%; height: 100%;"> <el-form :model='form' class='demo-ruleForm' ref='form' label-width="100px" :rules='rules'> <el-form-item prop='name' label="收货人"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item prop='mobile' label="手机号"> <el-input v-model="form.mobile"></el-input> </el-form-item> <el-form-item prop='province' label="省"> <el-select v-model='form.province' placeholder='请选择省' @change='proChange'> <el-option v-for='item in provinces' :key='item.value' :value='item.value' :label="item.label"> </el-option> </el-select> </el-form-item> <el-form-item prop='city' label="市"> <el-select v-model='form.city' placeholder='请选择市' @change='cityChange'> <el-option v-for='item in cities' :key='item.value' :value='item.value' :label="item.label"> </el-option> </el-select> </el-form-item> <el-form-item prop='district' label="县/区"> <el-select v-model='form.district' placeholder='请选择区/县' @change='districtChange'> <el-option v-for='item in districts' :key='item.value' :value='item.value' :label="item.label"> </el-option> </el-select> </el-form-item> <el-form-item prop='detail' label="详细地址"> <el-input placeholder='请填写详细地址' :number='true' v-model='form.detail'> </el-input> </el-form-item> </el-form> </section> </div> </template> <script> import Address from './addr.js' let type = 1 // let provinceValue = 2 // let cityValue = 52 //根据apid查找对象 function findcity(item) { return item.type == type; } function findChildren(list, value) { let filtered = list.filter((item) => { return item.value === value }) console.log(value) // console.log(list,75) // console.log(filtered) return filtered[0].children } //筛选出各省级对象 let pObj = Address.filter(findcity) export default { name: 'vueAddress', props: ['province', 'city', 'district', 'detail', 'name', 'mobile'], created() { }, mounted() { let vm = this vm.show = vm.showAddressPicker console.log(this.form) }, computed: { cities: function () { if (this.form.province) { return findChildren(pObj, this.form.province) } else { return [] } }, districts: function () { if (this.form.city) { return findChildren(this.cities, this.form.city) } else { return [] } } }, data() { return { rules: { province: [{required: true, message: '请选择省份', trigger: 'change'}], city: [{required: true, message: '请选择城市', trigger: 'change'}], district: [{required: true, message: '请选择区/县', trigger: 'change'}], detail: [{required: true, message: '请填写详细地址', trigger: 'change'}], name: [{required: true, message: '请填写收货人', trigger: 'change'}], mobile: [{required: true, message: '请填写手机号', trigger: 'change'}] }, form: { province: this.province, city: this.city, district: this.district, detail: this.detail, name: this.name, mobile: this.mobile }, provinces: pObj } }, watch: { form: { handler: function (val) { this.$emit('change', val); console.log(this.form) }, deep: true }, name: { handler: function (val) { console.log(val) // this.$emit('change', val); // console.log(this.city) // if(this.province){ // this.form.province = this.province // } // if(this.city){ // this.form.city = this.city // } // if(this.district){ // this.form.district = this.district // } // if(this.detail){ // this.form.detail = this.detail // } // if(this.name){ // this.form.name = this.name // } // if(this.mobile){ // this.form.mobile = this.mobile // } // console.log(this.form) this.form = { province: this.province, city: this.city, district: this.district, detail: this.detail, name: this.name, mobile: this.mobile } console.log(this.form) }, deep: true } }, methods: { proChange: function (val, oldVal) { if (oldVal) { this.form.city = ''; this.form.district = ''; } // console.log(this.val) // console.log(this.oldVal) // console.log(this.form) this.form.city = this.cities[0].value; this.form.district = this.districts[0].value; console.log(this.province) }, cityChange: function (val, oldVal) { this.form.district = this.districts[0].value; }, districtChange: function (val, oldVal) { if (oldVal) { this.form.detail = ''; } }, detailChange: function (val) { console.log(val); } } } </script> <style scoped> .mint-popup { width: 100%; } .footer-btn { box-sizing: border-box; position: fixed; width: 100%; z-index: 2; left: 0; bottom: 3rem; } .input { border: none; } .padding { padding: 1.5rem; font-size: 1.4rem; } .float-right { float: right; } </style>