v-region 选择联级框地名,在对应的表格中同时自动填入行政码以及注意事项
效果:
下面代码可直接使用,但是请提前下载好 v-region和element ui的依赖
v-region需要在main.js中引入:
import vRegion from 'v-region'
Vue.use(vRegion)
element的引入就不多说啦~网上一堆
go~
帮到你的话,记得点个赞哦~
<template >
<div class="bg">
<el-form
ref="addFormRef"
:model="addForm"
:rules="addFormRules"
label-width="100px"
>
<!-- 生成地址码 -->
<el-form-item
label="生成地址码"
label-width="120px"
>
<v-region
v-model="addSelected"
type="column" // 多列竖排模式
:search="true"
:town="true"
@values="addFormAddress" //返回已选中的行政区划数据
/>
</el-form-item>
<el-form-item
label="省(6位)"
prop="provinceCode"
>
<el-input
v-model="addForm.provinceCode"
autocomplete="off"
/>
</el-form-item>
<el-form-item
label="市(6位)"
prop="cityCode"
>
<el-input
v-model="addForm.cityCode"
autocomplete="off"
/>
</el-form-item>
<el-form-item
label="区(6位)"
prop="countyCode"
>
<el-input
v-model="addForm.countyCode"
autocomplete="off"
/>
</el-form-item>
<el-form-item
label="镇(9位)"
prop="townCode"
>
<el-input
v-model="addForm.townCode"
autocomplete="off"
/>
</el-form-item>
<el-form-item
label="街道"
prop="villageCode"
>
<el-input v-model="addForm.villageCode" />
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="addFormData"
>立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import 'element-ui/lib/theme-chalk/index.css'
import { Form, FormItem, Input, Button } from 'element-ui'
export default {
components: {
ElForm: Form,
ElFormItem: FormItem,
ElInput: Input,
ElButton: Button
},
data () {
return {
// 显示信息
addForm: {
provinceCode: '',
cityCode: '',
countyCode: '',
townCode: '',
villageCode: ''
},
// 地址默认选择列表
addSelected: {
province: '',
city: '',
area: '',
town: ''
},
// 验证规则
addFormRules: {
provinceCode: [
{ required: true, message: '请输入省行政码', trigger: 'blur' },
{
min: 6,
max: 6,
message: '必须为6位数字',
trigger: 'blur'
}
],
cityCode: [
{ required: true, message: '请输入市行政码', trigger: 'blur' },
{
min: 6,
max: 6,
message: '必须为6位数字',
trigger: 'blur'
}
],
countyCode: [
{ required: true, message: '请输入区行政码', trigger: 'blur' },
{
min: 6,
max: 6,
message: '必须为6位数字',
trigger: 'blur'
}
],
townCode: [
{ required: true, message: '请输入镇行政码', trigger: 'blur' },
{
min: 9,
max: 9,
message: '必须为9位数字(若大于9位,取前9位即可)',
trigger: 'blur'
}
]
}
}
},
methods: {
// 获取行政码 添加到data中 显示出来
addFormAddress (value) {
if (!value) {
return
}
if (value.town) {
this.addForm.provinceCode = value.province.key
this.addForm.cityCode = value.city.key
this.addForm.countyCode = value.area.key
this.addForm.townCode = value.town.key
} else {
return
}
console.log(value)
},
// 创建
addFormData () {
this.$refs.addFormRef.validate(async valid => {
if (!valid) return
// 验证成功则发起网络请求 --- 这里你们要更换成自己的后台api接口哦
const { provinceCode, cityCode, countyCode, townCode } = this.addForm
const addParams = new FormData()
addParams.append('provinceCode', provinceCode)
addParams.append('cityCode', cityCode)
addParams.append('countyCode', countyCode)
addParams.append('townCode', townCode)
addFormData(addParams).then((response) => {
this.$router.go(0)
if (response.code === 200) {
return this.$message.success('更新成功')
} else {
return this.$message.error('更新失败')
}
})
this.addDialogVisible = false
})
},
// 清空表单数据
addDialogClosed () {
this.$refs.addFormRef.resetFields()
}
}
}
</script>
注意事项:
1、有时候的应用场景为:获取到行政码,然后需要转换成省市区,此时,后端一般传过来的数据为数字型,必须转换为 字符串形式 才能转换成功(此针对v-region组件)。