遅延読み込みエコー効果を実装する必要がある
例: バックエンドはデータを返します广东省/广州市/天河区: 440000000000/440100000000/440106000000。天河区の次のレベルに自動的に拡張する必要があります。効果は次のとおりです。
コード
私の実装アイデアは、440000000000/440100000000/440106000000各レベルでデータを取得してツリーを形成することです。
このインターフェイスによってgetAreaList返されるデータ形式は次のとおりです。
[
{
areaCode: "440106000000",
areaLevel: "4",
areaName: "天河区",
areaSeq: "5",
childNum: 21,
parentAreaSeq: "xxx"
}
]
次のようにコンポーネントを試してください。
<template>
<div class="cascader-lazy">
<h2>需要回显的地区：广东省/广州市/天河区</h2>
<h3>需要回显的地区对应的编码：440000000000/440100000000/440106000000</h3>
<el-cascader ref="cascaderLazy" :options="dataList" :props="props" v-model="areaList" />
</div>
</template>
<script>
import axios from "axios";
export default {
name: "CascaderLazy",
data() {
return {
areaList: [],
dataList: [],
props: {
value: "areaCode",
label: "areaName",
lazy: true,
lazyLoad: this.lazyLoad
}
};
},
mounted() {
this.areaList = ["440000000000", "440100000000", "440106000000"];
this.loadOptions(this.areaList);
},
methods: {
// 获取数据
getAreaList(parentAreaSeq) {
return new Promise(async (resolve, reject) => {
try {
const response = await axios.get("xxxx", {
params: {
parentAreaSeq: parentAreaSeq
}
});
resolve(
response.data.data.map((el) => {
el.leaf = el.childNum === 0;
return el;
})
);
} catch (error) {
console.error(error);
reject();
}
});
},
// 遍历一级选择框，把二级选择框的数据放在一级的children属性上
async loadOptions(areaList) {
// 先初始调用一次
let tempArr = [];
let initRes = await this.getAreaList();
tempArr.push(initRes);
// 然后遍历 areaList 找到对应的 areaSeq 获取地区列表
for (let i = 0; i < areaList.length; i++) {
if (areaList.length > 0) {
let areaSeq = "";
areaSeq = tempArr[i].filter((el) => el.areaCode === areaList[i]).map((el) => el.areaSeq)[0];
let res = await this.getAreaList(areaSeq);
tempArr.push(res);
}
}
// 先加一个最后层级的地区用于展示，最后在删掉
if (tempArr[areaList.length][0]) {
areaList.push(tempArr[areaList.length][0].areaCode);
}
// 从后面开始遍历组成一个树
for (let len = tempArr.length - 1; len >= 0; len--) {
if (len - 1 < 0) break;
// 给当前areaCode添加children
tempArr[len - 1].forEach((item) => {
if (item.areaCode === areaList[len - 1]) {
item.children = tempArr[len];
}
});
}
this.dataList = tempArr[0];
// 删掉最后选中的
this.$nextTick(() => {
areaList.pop();
// 点击自动下拉出来
this.$refs.cascaderLazy.$el.click();
});
},
async lazyLoad(node, resolve) {
let nodes = [];
if (node.level !== 0 && node.data) {
nodes = await this.getAreaList(node.data.areaSeq);
}
resolve(nodes);
}
}
};
</script>