先看圖，你是否也遇到這個(gè)需求？

如果你正在焦頭爛額，無(wú)腦抓瞎，那么你來(lái)對(duì)地方了，因?yàn)槲覍⒔o你一個(gè)簡(jiǎn)單易懂的實(shí)現(xiàn)方案。

我也在網(wǎng)上翻了無(wú)數(shù)頁(yè)答案，也照著別人的代碼和思路嘗試了，事實(shí)上并不能解決我這個(gè)棘手的問(wèn)題。

級(jí)聯(lián)下拉選多選、懶加載、數(shù)據(jù)回顯，盡管 ElementUI 已經(jīng)很貼心，文檔寫(xiě)的也很好。

前兩個(gè)很容易就可以實(shí)現(xiàn)，可是唯獨(dú)數(shù)據(jù)回顯被遺忘了，似乎忘記了數(shù)據(jù)回顯應(yīng)該是級(jí)聯(lián)選擇器必備的功能，很遺憾，需要我們自己去實(shí)現(xiàn)。

根據(jù)文檔我們可以很容易配置一個(gè)級(jí)聯(lián)組件，并且級(jí)聯(lián)選擇器的值應(yīng)該是一個(gè)二維數(shù)組。

<el-cascaderv-model="updateForm.category"separator="-":props="cascaderProps" ></el-cascader>

然后配置cascaderProps數(shù)據(jù)如下

cascaderProps: {multiple: true,checkStrictly: true,lazy: true,lazyLoad: this.lazyLoad,value: "id",label: "name",leaf: "leaf" }

如果照做了，那么恭喜你，已經(jīng)實(shí)現(xiàn)了一半的需求了，不過(guò)你很快就會(huì)發(fā)現(xiàn)，編輯的時(shí)候級(jí)聯(lián)選擇器的數(shù)據(jù)是空的。

不過(guò)組件給我們提供了一個(gè)參數(shù)options，如果級(jí)聯(lián)選擇的模板是完整的，那就可以很容易回顯這個(gè)數(shù)組，可是現(xiàn)在的選擇模板是懶加載的，那么就需要根據(jù)updateForm.category 拼出一個(gè)備選模板就可以了。

問(wèn)題的關(guān)鍵就在于options模板如何生成，這個(gè)問(wèn)題困惱了我好幾天，最后也是靈感加成，十分鐘就擼完了。

先看一段代碼，然后分析下思路。

//編輯類(lèi)目async updateBtnClick(node, data) {this.node = node.parent; this.updateForm.id = data.id; this.updateForm.name = data.name;this.updateForm.level = ["一級(jí)類(lèi)目", "二級(jí)類(lèi)目", "三級(jí)類(lèi)目", "四級(jí)類(lèi)目"][node.level - 1];this.updateForm.parent_name = node.level > 1 ? node.parent.data.name : "";this.updateForm.category = data.category || [];// this.updateForm.category_name = data.category_name || [];this.category_array = Array.from(new Set(this.updateForm.category.join(",").split(",")));this.initOptions();},//初始化categoryasync initOptions() {let req = {parent_id: 0,category_id: this.node.id || 0};let res = await this.$api.getFrontcategoryTemp(req);if (res.error_code == 0 && res.data && res.data.list) {this.cascaderOptions = await this.loadOptions(res.data.list || []);this.updateForm.visible = true;}},//遞歸加載子類(lèi)目async loadOptions(category) {let array = [];for (let i = 0; i < category.length; i++) {if (category[i].child_count > 0 &&this.category_array.includes(category[i].id + "")) {let req = {parent_id: category[i].id,category_id: this.node.id || 0};let res = await this.$api.getFrontcategoryTemp(req);if (res.error_code == 0 && res.data && res.data.list) {category[i].children = await this.loadOptions(res.data.list);}}array.push(category[i]);}return array;}

解決方案的思路：

1、將需要回顯的數(shù)據(jù)二維數(shù)組平鋪成一維數(shù)組并去重。

2、初始化備選項(xiàng)的一級(jí)下拉選。

3、遍歷一級(jí)下拉選判斷是否需要加載子類(lèi)目。

4、遞歸遍歷下拉選。

這個(gè)方案確實(shí)也是非常容易理解的，與我們手動(dòng)點(diǎn)擊加載子集類(lèi)似。

最終的組件配置如下：

<el-cascaderv-model="updateForm.category"separator="-":options="cascaderOptions":props="cascaderProps" ></el-cascader>

好了，希望你能搜到我這個(gè)方案，最好盡快搜到。

ElementUI 版本2.13.2。

----

再來(lái)更新一點(diǎn)，算是優(yōu)化吧。

針對(duì)第一步

1、將需要回顯的數(shù)據(jù)二維數(shù)組平鋪成一維數(shù)組并去重。

可以做點(diǎn)優(yōu)化，二維數(shù)組

[[1,10,101],[1,11,115],[2,20,201,2014]] //可以去掉最后一位 [[1,10],[1,11],[2,20,201]] //這樣可以減少很多請(qǐng)求

減少不必要的資源開(kāi)銷(xiāo)。

-------------再來(lái)更新一點(diǎn)-------------

因?yàn)樗阉鞯膯?wèn)題，所以重新封裝了組件，然后重新縷了一下思路，實(shí)現(xiàn)了更優(yōu)雅的，懶加載回顯和搜索，以及搜索回顯的問(wèn)題。

UI如下

準(zhǔn)備打個(gè)包，方便以后需要的人吧。

總結(jié)

以上是生活随笔為你收集整理的动态加载 回显_ElementUI cascader级联动态加载及回显的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。