标签：case childrenData 级联 return elementui default addresstype type 选择器

<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>

标签：case,childrenData,级联,return,elementui,default,addresstype,type,选择器
来源： https://blog.csdn.net/qq_40280730/article/details/120978200

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。