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