先看圖，你是否也遇到這個需求？

如果你正在焦頭爛額，無腦抓瞎，那么你來對地方了，因為我將給你一個簡單易懂的實現(xiàn)方案。

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

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

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

根據(jù)文檔我們可以很容易配置一個級聯(lián)組件，并且級聯(lián)選擇器的值應(yīng)該是一個二維數(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)實現(xiàn)了一半的需求了，不過你很快就會發(fā)現(xiàn)，編輯的時候級聯(lián)選擇器的數(shù)據(jù)是空的。

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

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

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

//編輯類目async updateBtnClick(node, data) {this.node = node.parent; this.updateForm.id = data.id; this.updateForm.name = data.name;this.updateForm.level = ["一級類目", "二級類目", "三級類目", "四級類目"][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;}},//遞歸加載子類目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、初始化備選項的一級下拉選。

3、遍歷一級下拉選判斷是否需要加載子類目。

4、遞歸遍歷下拉選。

這個方案確實也是非常容易理解的，與我們手動點擊加載子集類似。

最終的組件配置如下：

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

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

ElementUI 版本2.13.2。

----

再來更新一點，算是優(yōu)化吧。

針對第一步

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

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

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

減少不必要的資源開銷。

-------------再來更新一點-------------

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

UI如下

準備打個包，方便以后需要的人吧。

總結(jié)

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

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