| | |
| | | <template> |
| | | <el-form-item :label="placeholder" :prop="prop"> |
| | | <el-cascader |
| | | v-model="selectedOptions" |
| | | :model-value="formatedValue" |
| | | @change="handleChange" |
| | | :options="locations" |
| | | :placeholder="placeholder" |
| | | :props="optionProps" |
| | | style="width: 280px" |
| | | style="width: 320px" |
| | | /> |
| | | </el-form-item> |
| | | </template> |
| | | |
| | | <script> |
| | | import { enumLocation } from '@/enum/location' |
| | | |
| | | // 记录选项是否是自定义传入的 |
| | | let customValue = true |
| | | import { enumLocation } from '@/enum/location'; |
| | | |
| | | export default { |
| | | props: { |
| | |
| | | data() { |
| | | return { |
| | | locations: enumLocation(this.allOption, this.level), |
| | | selectedOptions: [], |
| | | optionProps: { |
| | | checkStrictly: this.checkStrictly |
| | | } |
| | | } |
| | | }; |
| | | }, |
| | | computed: { |
| | | placeholder() { |
| | | const list = '省/市/区/镇'.split('/') |
| | | const p = [] |
| | | const list = '省/市/区/镇/集/物'.split('/'); |
| | | const p = []; |
| | | for (let i = 0; i < this.level; i++) { |
| | | p.push(list[i]) |
| | | p.push(list[i]); |
| | | } |
| | | return p.join('/') |
| | | } |
| | | }, |
| | | watch: { |
| | | selectedOptions: { |
| | | handler(nVal, oVal) { |
| | | if (nVal != oVal) { |
| | | const res = this.optionFormat(nVal) |
| | | // 标明此时的value更新是组件内部触发 |
| | | customValue = false |
| | | this.$emit('update:value', res) |
| | | } |
| | | }, |
| | | deep: true |
| | | return p.join('/'); |
| | | }, |
| | | value: { |
| | | handler(nVal, oVal) { |
| | | // 只有当值是外部传入时,才触发更新 |
| | | if (!customValue) { |
| | | customValue = true |
| | | return |
| | | } |
| | | if (nVal != oVal) { |
| | | this.selectedOptions = this.optionFormatReverse(nVal) |
| | | } |
| | | }, |
| | | deep: true, |
| | | immediate: true |
| | | formatedValue() { |
| | | return this.optionFormatReverse(this.value); |
| | | } |
| | | }, |
| | | methods: { |
| | | handleChange(value) { |
| | | this.$emit('update:value', this.optionFormat(value)); |
| | | }, |
| | | /** |
| | | * 地区选项结果格式化 |
| | | */ |
| | |
| | | dCode: null, |
| | | dName: null, |
| | | tCode: null, |
| | | tName: null |
| | | } |
| | | tName: null, |
| | | aCode: null, |
| | | aName: null, |
| | | mCode: null, |
| | | mName: null, |
| | | }; |
| | | if (val.length > 0) { |
| | | res.pCode = val[0][0] |
| | | res.pName = val[0][1] |
| | | res.pCode = val[0][0]; |
| | | res.pName = val[0][1]; |
| | | } |
| | | if (val.length > 1) { |
| | | res.cCode = val[1][0] |
| | | res.cName = val[1][1] |
| | | res.cCode = val[1][0]; |
| | | res.cName = val[1][1]; |
| | | } |
| | | if (val.length > 2) { |
| | | res.dCode = val[2][0] |
| | | res.dName = val[2][1] |
| | | res.dCode = val[2][0]; |
| | | res.dName = val[2][1]; |
| | | } |
| | | if (val.length > 3) { |
| | | res.tCode = val[3][0] |
| | | res.tName = val[3][1] |
| | | res.tCode = val[3][0]; |
| | | res.tName = val[3][1]; |
| | | } |
| | | return res |
| | | if (val.length > 4) { |
| | | res.aCode = val[4][0]; |
| | | res.aName = val[4][1]; |
| | | } |
| | | if (val.length > 5) { |
| | | res.mCode = val[5][0]; |
| | | res.mName = val[5][1]; |
| | | } |
| | | return res; |
| | | }, |
| | | optionFormatReverse(val) { |
| | | const res = [] |
| | | const res = []; |
| | | if (val) { |
| | | if (val.pCode) { |
| | | res.push([val.pCode, val.pName]) |
| | | if (val.pName) { |
| | | res.push([val.pCode, val.pName]); |
| | | } |
| | | if (val.cCode) { |
| | | res.push([val.cCode, val.cName]) |
| | | if (val.cName) { |
| | | res.push([val.cCode, val.cName]); |
| | | } |
| | | if (val.dCode) { |
| | | res.push([val.dCode, val.dName]) |
| | | if (val.dName) { |
| | | res.push([val.dCode, val.dName]); |
| | | } |
| | | if (val.tCode) { |
| | | res.push([val.tCode, val.tName]) |
| | | } |
| | | if (val.tName) { |
| | | res.push([val.tCode, val.tName]); |
| | | } |
| | | if (val.aName) { |
| | | res.push([val.aCode, val.aName]); |
| | | } |
| | | if (val.mName) { |
| | | res.push([val.mCode, val.mName]); |
| | | } |
| | | } |
| | | return res |
| | | return res; |
| | | } |
| | | }, |
| | | mounted() { |
| | | if (this.initValue) { |
| | | if (this.checkStrictly) { |
| | | this.selectedOptions = [this.locations[0].value] |
| | | this.handleChange([this.locations[0].value]); |
| | | } else { |
| | | const f = (location) => { |
| | | if (location.children && location.children.length > 0) { |
| | | const r = f(location.children[0]) |
| | | r.unshift(location.value) |
| | | return r |
| | | const r = f(location.children[0]); |
| | | r.unshift(location.value); |
| | | return r; |
| | | } else { |
| | | return [location.value] |
| | | return [location.value]; |
| | | } |
| | | } |
| | | this.selectedOptions = f(this.locations[0]) |
| | | }; |
| | | this.handleChange(f(this.locations[0])); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |