You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.7 KiB
83 lines
1.7 KiB
<template>
|
|
<div>
|
|
<el-cascader ref="elCascader"
|
|
style="width: 100%;"
|
|
v-model="val"
|
|
:placeholder="placeholder"
|
|
:options="village_codes"
|
|
clearable
|
|
:props="props"
|
|
@change="pick"
|
|
@expand-change="expand"></el-cascader>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex"
|
|
import { getVillages } from "@/api/common";
|
|
export default {
|
|
props: {
|
|
placeholder: {
|
|
type: String,
|
|
default: "请选择区域"
|
|
},
|
|
level: {
|
|
type: Number,
|
|
default: 5
|
|
},
|
|
value: [Number,String],
|
|
propsValue: {
|
|
type: String,
|
|
default: 'code'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
resolveData: [],
|
|
val: [],
|
|
props: {
|
|
lazy: true,
|
|
value: "code",
|
|
label: "name",
|
|
lazyLoad: (node, resolve) => {
|
|
const { code, level } = node.data;
|
|
getVillages({ pcode: code }).then(res => {
|
|
let nodes = res.list.map(i => ({
|
|
...i,
|
|
leaf: i.level >= this.level
|
|
}))
|
|
this.resolveData = nodes;
|
|
resolve(nodes)
|
|
}).catch(err => resolve())
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
pick (e) {
|
|
this.$emit('input', e.at(-1))
|
|
},
|
|
expand (e) {
|
|
this.$store.commit('app/SET_VILLAGE_CODES', { val: this.resolveData, pcode: e })
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['village_codes']),
|
|
},
|
|
watch: {
|
|
propsValue: {
|
|
handler: function(newVal) {
|
|
this.props.value = newVal
|
|
},
|
|
immediate: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep .el-input > input::placeholder {
|
|
color: #606266;
|
|
}
|
|
</style>
|