85 lines
1.5 KiB
Vue
85 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<el-cascader
|
||
|
|
:options="area.data"
|
||
|
|
:show-all-levels="showAllLevels"
|
||
|
|
v-model="model"
|
||
|
|
:filterable="filterable"
|
||
|
|
:placeholder="placeholder"
|
||
|
|
:disabled="disabled"
|
||
|
|
:clearable="clearable"
|
||
|
|
></el-cascader>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapGetters } from "vuex";
|
||
|
|
|
||
|
|
function getProv(code) {
|
||
|
|
return code.substring(0, 2) + "0000";
|
||
|
|
}
|
||
|
|
function getCity(code) {
|
||
|
|
return code.substring(0, 4) + "00";
|
||
|
|
}
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
value: String,
|
||
|
|
filterable: Boolean,
|
||
|
|
placeholder: String,
|
||
|
|
showAllLevels: { type: Boolean, default: true },
|
||
|
|
disabled: Boolean,
|
||
|
|
clearable: Boolean,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.$store.dispatch("InitArea");
|
||
|
|
},
|
||
|
|
watch: {},
|
||
|
|
computed: {
|
||
|
|
...mapGetters(["area"]),
|
||
|
|
prov() {
|
||
|
|
if (this.county) {
|
||
|
|
return getProv(this.county);
|
||
|
|
} else {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
city() {
|
||
|
|
if (this.county) {
|
||
|
|
return getCity(this.county);
|
||
|
|
} else {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
county: {
|
||
|
|
get() {
|
||
|
|
return this.value;
|
||
|
|
},
|
||
|
|
set(val) {
|
||
|
|
this.$emit("input", val);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
model: {
|
||
|
|
set(val) {
|
||
|
|
if (val.length > 2) {
|
||
|
|
this.county = val[2];
|
||
|
|
} else {
|
||
|
|
this.county = undefined;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
get() {
|
||
|
|
if (this.county) {
|
||
|
|
return [this.prov, this.city, this.county];
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|