[JavaScript知识库]elementui的级联地址选择器

<template>
  <div style="display: flex; align-items: flex-end">
    <el-cascader
      ref="cascaderAddr"
      :options="options"
      :props="{ checkStrictly: true, value: 'code', label: 'name' }"
      :style="{ width: inputwidth + 'px' }"
      v-model="chooseAddressList"
      :placeholder="defaultaddress"
      @change="handleChange"
      @visible-change="visibleChange"
    ></el-cascader>
    <div v-if="isshowtitle" style="color: red; margin-left: 10px">
      {{ title }}
    </div>
  </div>
</template>
<script>
/* 
  props参数：
           inputwidth:          输入框的宽度
           addresstype:         地址填写要求,4: 省市区街道四级必填，3：省市区三级必填，2：省市必填， 0:没有限制
           addresslevel:        请求接口的地址级别，PROVINCE：省份，CITY： 省市，DISTRICT：省市区，STREET：省市区街道
           currentaddresscode:  地址反填，传入当前地区的code，如：'安徽省安庆市大观区大观开发区' 要传入 '340803400000',
           isshowtitle:         是否显示提示信息
  $emit事件：
           getaddressinfo       将所选地址信息传递到父组件
*/
import 'element-ui/lib/theme-chalk/index.css'
let addressList = require('././address.json')
export default {
  props: {
    inputwidth: {
      type: Number,
      default: 260,
    },
    addresstype: {
      type: Number,
      default: 0,
    },
    addresslevel: {
      type: String,
      default: 'STREET',
    },
    isshowtitle: {
      type: Boolean,
      default: true,
    },
    currentaddresscode: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      options: addressList,
      title: '',
      chooseAddressList: [],
    }
  },
  mounted() {
    this.getTitle()
    this.init()
  },
  methods: {
    visibleChange(flag) {
      this.$nextTick(() => {
        let areaInfo = this.$refs['cascaderAddr'].getCheckedNodes()
        if (!flag && areaInfo.length !== 0) {
          if (this.addresstype !== 0 && areaInfo[0].level < this.addresstype) {
            _.ui.notify({
              type: 'warning',
              message: this.getLevelInfo(),
            })
            this.chooseAddressList = []
          } else {
            this.$emit('getaddressinfo', areaInfo[0].data)
            console.log(
              this.chooseAddressList,
              areaInfo[0].data,
              'selectedOptions'
            )
          }
        }
      })
    },
    handleChange(value) {
      // console.log(value)
      // this.$refs.cascader.dropDownVisible = false //监听值发生变化就关闭它
    },
    init() {
        if (this.currentaddresscode !== '') {
          this.chooseAddressList = this.getTreeDeepArr(
            this.currentaddresscode,
            this.options
          )
      }
    },
    getTitle() {
      switch (this.addresstype) {
        case 4:
          this.title = '（省、市、区、街道为必选项）'
          break
        case 3:
          this.title = '（省、市、区为必选项）'
          break
        case 2:
          this.title = '（省、市为必选项）'
          break
      }
    },
    getLevelInfo() {
      switch (this.addresstype) {
        case 4:
          return '请选择省、市、区、街道'
        case 3:
          return '请选择省、市、区'
        case 2:
          return '请选择省、市'
      }
    },
    // 反填地址
    getTreeDeepArr(key, treeData) {
      let arr = [] // 在递归时操作的数组
      let returnArr = [] // 存放结果的数组
      let depth = 0 // 定义全局层级
      // 定义递归函数
      function childrenEach(childrenData, depthN) {
        for (var j = 0; j < childrenData.length; j++) {
          depth = depthN // 将执行的层级赋值 到 全局层级
          arr[depthN] = childrenData[j].code
          if (childrenData[j].code == key) {
            returnArr = arr.slice(0, depthN + 1) //将目前匹配的数组，截断并保存到结果数组，
            break
          } else {
            if (childrenData[j].children) {
              depth++
              childrenEach(childrenData[j].children, depth)
            }
          }
        }
        return returnArr
      }
      return childrenEach(treeData, depth)
    },
  },
}
</script>
<style>
</style>