element ui Cascader级联回显

回显地址信息

src下新建全国地址.json(网上自己找一个)

image.png 地址格式

第一种情况：省 市 区 街道精准匹配

src下新建地址组件

• 注意：因为地址源文件设置的是四级联的(省 市 区 街道)，由于地址是精准匹配的，如果省 市 区 街道 没有完全匹配上的话，那么地址是不会回显出来

<template>
  <el-row class="region">
    <el-cascader @change="cascaderChange" clearable filterable placeholder="请选择" class="cascader" :options="options" v-model="address"></el-cascader>
    &nbsp;&nbsp;&nbsp;
    <el-input v-if="showStreet" @change="cascaderChange" clearable v-model="street" style="width: 300px" placeholder="请输入具体门牌号"></el-input>
  </el-row>
</template>

<script>
const regionJson = require('@/assets/json/pcas.json')
export default {
  props: {
    value: {
      type: [String]
    },
    showStreet: {
      type: Boolean,
      required: false,
      default: true,
    }
  },
  data() {
    return {
      options: [],
      street: '',
      address: [],
    }
  },
  watch: {
    value(val) {
      if (!val) {
        this.address = []
        this.street = ''
      } else {
        const entireAddr = val.split(' ')
        this.address = entireAddr.slice(0, 4)
        this.street = entireAddr.length === 1 ? entireAddr[0] : entireAddr[4]
      }
    }
  },
  created() {
    this.formatPcas(regionJson, this.options)
  },
  methods: {
    formatPcas(obj, arr) {
      if (Array.isArray(obj)) {
        obj.forEach(label => {
          arr.push({ label, value: label })
        })
      } else {
        for (const [key, value] of Object.entries(obj)) {
          var item = {
            label: key,
            value: key,
            children: this.formatPcas(value, [])
          }
          arr.push(item)
        }
      }
      return arr
    },
    cascaderChange() {
      const str = [...this.address, this.street].join(' ').trim()
      this.$emit('input', str)
    }
  },

}
</script>

<style scoped lang="scss">
.region{
  display: flex;
  .cascader{
    flex: 1;
  }
}
</style>

在当前页面引用

import RegionCascader from '../../../components/regionCascader.vue'

components: { RegionCascader },

页面使用

<el-form-item label="联系地址" prop="address">
   <regionCascader v-model.trim="form.address"></regionCascader>
</el-form-item>

data(){
  return{
    form:{
      address: '',
    },
    rules:{
      { required: true, message: '请输入联系地址', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
              if (value.trim() === '' || !~value.indexOf(' ')) {
                callback(new Error('请选择联系地址'))
              } else {
                callback()
              }
            }
          }
        ]
    }
  }
},
methods: {
    async handleEdit(row) {
      const res = await this.$requestInternet.get('/api/xx', {
        params: {
          id: xx
        }
      })
      // 这里把返回的地址做处理是由于后端返回的地址有用 '/' 区分，
     // 而组件里是有去掉的(组件最开始是应用在其它地方)，所以两边要保持一致
    // jzdz: "广东省/深圳市/福田区/卓越大厦"
      this.form.address = res.jzdz.split('/').join(' ')
      // const tArr = res.jzdz.split('/')
      // this.form.address = tArr.slice(0, 4).join(' ')
    },

第二种情况：四级地址修改为三级地址

src下新建地址组件

• 注意：因为小程序端新增地址时用的组件的地址只有 省 市 区三级，而pc端的数据来源于小程序端的新增，所以需要把四级地址改为三级展示。
  除了组件修改外，其它地方不变。

四级地址修改为三级地址

<template>
  <el-row class="region">
    <el-cascader @change="cascaderChange" clearable filterable placeholder="请选择" class="cascader" :options="options" v-model="address"></el-cascader>
    &nbsp;&nbsp;&nbsp;
    <el-input v-if="showStreet" @change="cascaderChange" clearable v-model="street" style="width: 300px" placeholder="请输入具体门牌号"></el-input>
  </el-row>
</template>

<script>
const regionJson = require('@/assets/json/pcas.json')
export default {
  props: {
    value: {
      type: [String]
    },
    showStreet: {
      type: Boolean,
      required: false,
      default: true,
    }
  },
  data() {
    return {
      options: [],
      street: '',
      address: [],
    }
  },
  watch: {
    value(val) {
      if (!val) {
        this.address = []
        this.street = ''
      } else {
        const entireAddr = val.split(' ')
        this.address = entireAddr.slice(0, 3)
        this.street = entireAddr.length === 1 ? entireAddr[0] : entireAddr[3]
      }
    }
  },
  created() {
    this.ergodicJson(regionJson, this.options)
  },
  methods: {
    formatPcas(obj, arr) {
      if (Array.isArray(obj)) {
        obj.forEach(label => {
          arr.push({ label, value: label })
        })
      } else {
        for (const [key, value] of Object.entries(obj)) {
          var item = {
            label: key,
            value: key,
            children: this.formatPcas(value, [])
          }
          arr.push(item)
        }
      }
      return arr
    },
    // 主要是这部分代码，把四级地址改为三级地址展示
    ergodicJson(obj, arr) {
      if (!Array.isArray(obj)) {
        for (const [key, value] of Object.entries(obj)) {
          var item = {
            label: key,
            value: key,
            // children: this.ergodicJson(value, [])
          }
          const tArr = this.ergodicJson(value, [])
          if (tArr.length) {
            item.children = tArr
          }
          arr.push(item)
        }
      }
      return arr
    },
    cascaderChange() {
      const str = [...this.address, this.street].join(' ').trim()
      this.$emit('input', str)
    }
  },

}
</script>

<style scoped lang="scss">
.region{
  display: flex;
  .cascader{
    flex: 1;
  }
}
</style>