v-region 选择联级框地名，在对应的表格中同时自动填入行政码以及使用注意事项

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组件)。