首页 > 代码库 > 地址选择器
地址选择器
<!-- 地址选择组件 --> <template> <el-form :model="form" class="demo-ruleForm" :rules="rules" ref="form" label-position="top"> <el-row :gutter="20" class="address"> <el-col :span="5"> <el-form-item prop="province"> <el-select v-model="form.province" placeholder="请输入省" @change="proChange" > <el-option v-for="item in provinces" :key="item.value" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="5"> <el-form-item prop="city"> <el-select v-model="form.city" placeholder="请输入市" @change="cityChange" > <el-option v-for="item in citys" :key="item.value" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item prop="detail"> <el-input placeholder="请填写详细地址" :number="true" v-model="form.detail"> </el-input> </el-form-item> </el-col> </el-row> </el-form> </template> <script> import addressData from ‘../assets/js/addressData.js‘ import store from ‘src/store.js‘ function formatData(data){ var result = []; for(var key in data){ result.push({ value: key }) } return result } export default { name:‘address‘, props:[‘province‘,‘city‘,‘detail‘,‘isAddressTrue‘], data: function () { return { rules:{ province:[{required:true,message:‘请选择省份‘,trigger:‘change‘}], city:[{required:true,message:‘请选择城市‘,trigger:‘change‘}], detail:[{required:true,message:‘请填写详细地址‘,trigger:‘change‘}] }, form:{ province: this.province, city: this.city, detail: this.detail }, provinces: formatData(addressData) } }, watch: { form: { handler:function(){ store.commit(‘setRuleForm‘,this.form); }, deep:true }, ifCheckFrom: function (val,oldVal) { if(val){ this.$refs.form.validate((valid) => { }) ; } } }, computed: { citys: function (){ return formatData(addressData[this.form.province]) }, ifCheckFrom: function () { return this.isAddressTrue } }, methods: { proChange: function (val,oldVal) { if(oldVal){ this.form.city=‘‘; this.form.detail=‘‘; } var data = formatData(addressData[this.form.province]); for(var i =0; i<data.length; i++){ this.$set(this.citys,i,data[i]); } }, cityChange: function (val, oldVal) { if (oldVal) { this.form.detail = ‘‘; } }, } } </script> <style> .address .el-form-item{margin-bottom: 0!important;margin-right: 0!important;} </style>
地址选择器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。