<template> <div> <a-cascader class="address-select" :options="areaData" :load-data="loadData" change-on-select v-model:value="innerValue" placeholder="请选择" @change="onChange" /> </div> </template> <script> import {areCodeTrans} from "../utils/common"; export default { name: 'DocAddress', props: { value: String }, data() { return { innerValue: [], areaData: [] } }, mounted() { this.init() }, methods: { async init() { if (!this.areaData.length) { const res = await this.$api.common.fetchAreaByCode('0') this.areaData = this.dataField(res.data || []) } let codeList = areCodeTrans(this.value); if (codeList.length > 1) { await this.viewHandle(codeList) } }, loadData(options) { const targetOption = options[options.length - 1] targetOption.loading = true this.$api.common.fetchAreaByCode(targetOption.value).then(res => { targetOption.children = this.dataField(res.data || [], options.length === 4) this.areaData = [...this.areaData] }).finally(() => { targetOption.loading = false }) }, dataField(data, last = false) { return data.map(e => { return { label: e.areaName, value: e.areaCode, id: e.id, isLeaf: last } }) }, // 回显处理 async viewHandle(val = []) { try { const length = val.length let current = this.areaData.find(e => e.value === val[0]) let index = 1 while (index < length) { const res = await this.$api.common.fetchAreaByCode(current.value) const result = res.data || [] if (!result.length) break current.children = this.dataField(result, index === 4) current = current.children.find(e => e.value === val[index]) this.areaData = [...this.areaData] if (!current) break index++ } } catch (err) { console.warn(err) } }, onChange(val) { console.log(val) this.$emit('input', val[val.length - 1]) this.$emit('change', val) } }, watch: { value: { handler(val) { if (this.innerValue.length > 0 && val == this.innerValue[this.innerValue.length - 1]) { return } let codeList = areCodeTrans(val); this.innerValue = codeList || [] if (codeList.length > 1) { this.viewHandle(codeList) } }, immediate: true }, } } </script> <style lang="less" scoped> </style>