168 lines
4.2 KiB
Vue
168 lines
4.2 KiB
Vue
<template>
|
||
<div class="con">
|
||
<el-cascader
|
||
:key="is_cascader"
|
||
v-model="addressArr"
|
||
:props="addressProps"
|
||
:options="province"
|
||
style="width: 300px;"
|
||
placeholder="选择地区"
|
||
></el-cascader>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
|
||
// import { provinceAndCityData } from 'element-china-area-data'
|
||
|
||
import { listEmisRegion } from "@/api/emis/emisRegion";
|
||
export default {
|
||
name: "RegionPicker",
|
||
props: {
|
||
value: {
|
||
type: [String, Number],
|
||
required: false
|
||
},
|
||
countryCode: {
|
||
type: String,
|
||
required: false
|
||
},
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
province: [{}],//这个数据是组件初始化created异步加载的数据，里面加空对象是为了el-cascader初始化没有数据报错 data=null这个原因
|
||
addressArr: [],//绑定的数据
|
||
is_cascader: Math.random(), //重新渲染标识key
|
||
addressInit: false, //标记组件第一级数据开始加载没有
|
||
addressProps: {
|
||
label: 'area_name',
|
||
value: 'area_id',
|
||
lazy: true,//开启异步加载
|
||
lazyLoad(node, resolve) {
|
||
const { value, level } = node
|
||
getPlace({ pid: value }).then(res => {
|
||
if (res.code === 200) {
|
||
if (level === 2) {//level=2是因为我城市数据只能选到第三级，第二级加载第三级数据
|
||
resolve(
|
||
res.data.map(item => {
|
||
item.leaf = 'leaf'//这个必须加，就是让组件识别是不是最后一级
|
||
return item
|
||
})
|
||
)
|
||
} else {
|
||
resolve(res.data)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
resetCascader:0,
|
||
svalue: [],
|
||
props: {
|
||
// checkStrictly: true,
|
||
lazy: true,
|
||
lazyLoad: (node, resolve) => {
|
||
const { level } = node;
|
||
const nodes = [];
|
||
// level: 层级
|
||
// node 节点数据
|
||
// 一级菜单数据
|
||
|
||
// 为1代表第一次请求
|
||
let type = level == 0 ? "1" : node.value;
|
||
this.queryRegion(type)
|
||
.then((res) => {
|
||
if (res.code != 200) {
|
||
this.msgFn("error", res.message);
|
||
return;
|
||
}
|
||
// 节点数组
|
||
res.rows.map((item) => {
|
||
// {value:'',label:'全部'}
|
||
let obj = {
|
||
value: item.id,
|
||
label: item.regionName,
|
||
leaf: node.level >= 2,
|
||
};
|
||
nodes.push(obj);
|
||
});
|
||
// resolve 节点返回
|
||
resolve(nodes);
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
},
|
||
},
|
||
};
|
||
},
|
||
watch: {
|
||
value(newVal) {
|
||
this.svalue = newVal;
|
||
},
|
||
svalue(newVal, oldVal) {
|
||
if (newVal !== oldVal) {
|
||
this.$emit("input", this.svalue);
|
||
}
|
||
},
|
||
countryCode(newVal) {
|
||
this.sCountry = newVal;
|
||
// this.provinceFn(1);
|
||
this.resetCascader++
|
||
}
|
||
},
|
||
created() {},
|
||
methods: {
|
||
// 获取省市区
|
||
async queryRegion(id) {
|
||
if(id==1){
|
||
let queryParams = {countryCode:this.sCountry,regionType:1};
|
||
let res=await listEmisRegion(queryParams);
|
||
console.log(res)
|
||
return res;
|
||
}else{
|
||
let queryParams = {parentId:id};
|
||
let res=await listEmisRegion(queryParams);
|
||
console.log(res)
|
||
return res;
|
||
}
|
||
|
||
},
|
||
handleChange(value) {
|
||
console.log(value);
|
||
},
|
||
// 弹窗
|
||
msgFn(type, text) {
|
||
this.$message({
|
||
message: text,
|
||
type: type,
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.con {
|
||
display: inline-block;
|
||
}
|
||
|
||
.el-radio__inner {
|
||
border-radius: 0;
|
||
border: 0;
|
||
width: 170px;
|
||
height: 34px;
|
||
background-color: transparent;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
top: -18px;
|
||
left: -19px;
|
||
}
|
||
|
||
.el-radio__input.is-checked .el-radio__inner {
|
||
background: transparent;
|
||
}
|
||
|
||
</style>
|