這一篇是上一次討論cascader級聯動態加載回顯問題的延續，文末有鏈接。

以下是思考和開發的過程，不感興趣可以直接看使用文檔。

https://github.com/zhuss/lazy-cascader?github.com

為什么要再寫一篇呢？

當然不是思想覺悟有多高，還不是因為產品提的需求，產品哭哭唧唧的說：“類目太多啦，我要有一個搜索的功能。”

一開始我是拒絕的，畢竟上一次為了解決回顯問題，耗費了一波本來就不多的頭發，可是后來想一想，都是打工人，打工人和打工人應該是相親相愛的一家人。

既然接下這個鍋，那就想辦法解決吧。

最開始，延續的原有的思路，既然回顯可以，那搜索應該也不在話下，所以就埋頭去研究官方文檔，然后發現了 filter-method 和 before-filter 這兩個方法。

嘗試過之后就pass掉了filter-method，這個只是在選擇的時候判斷節點是否匹配，不適合動態請求和處理數據。

而 before-filter 方法是可以的，而且文檔寫的比較明確。

篩選之前的鉤子，參數為輸入的值，若返回 false 或者返回 Promise 且被 reject，則停止篩選

如果我們在方法中根據輸入值去請求后端接口，拿到一組備選項，然后根據拿到的備選項動態更新我們的options參數，那么就可以在組件中篩選出我們想要的節點了吧，至于動態更新options的方法，可以同上一篇的回顯邏輯類似。

按照這個思路，同事在一番倒騰之后，確實可以實現動態搜索的需求。

但是，這樣處理是有不足的地方的。

1、產品設計的UI和ElementUI的組件并不一致，交互方式也不一樣。

2、在動態更新options參數的時候會動態請求很多節點數據，而這些節點大部分都是不需要展示的。

所以，為了解決這兩個問題，我又陷入的沉思，甚至想不看ElementUI手動擼一個組件（想想而已）。

那既然原有組件在UI上沒辦滿足產品需求，那我們就自己寫這個UI吧，順著這個思路，那我們就需要用到一個關鍵的東西，級聯面板。

因為上圖UI的組成部分就這么幾個東西。

• 輸入框
• Popover 彈出框
• 搜索選擇框
• 級聯選擇面板

級聯選擇面板的值僅僅是一個數據，也就是節點id的路徑數組，那我們就必須根據這個值，然后遍歷options得到對應的label的數組，顯示在輸入框中。

通過搜索拿到的數據也可以拿到一個節點的值。

那么我們只需要根據值的變化，動態請求需求展示的節點，獲取到對應的label即可。

于是就有了最緊要的一段代碼。

html

/**格式化id=>object */

解決了這個問題，基本上就已經實現了回顯了。

至于搜索，直接用的ElementUI的組件autocomplete就可以了，最后在仿照cascader的參數封裝這個組件的，把需要的參數暴露出去就可以了。

完整的代碼看下

<

js

export

css

.lazy-cascader {display: inline-block;width: 300px;.lazy-cascader-input {width: 100%;background: #fff;height: auto;min-height: 36px;padding: 5px;line-height: 1;cursor: pointer;> .lazy-cascader-placeholder {padding: 0 2px;line-height: 28px;color: #999;font-size: 14px;}> .lazy-cascader-label {padding: 0 2px;line-height: 28px;color: #606266;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}.lazy-cascader-input-disabled {background-color: #f5f7fa;border-color: #e4e7ed;color: #c0c4cc;cursor: not-allowed;> .lazy-cascader-label {color: #c0c4cc;}> .lazy-cascader-placeholder {color: #c0c4cc;}} } .lazy-cascader-tag {display: inline-flex;align-items: center;max-width: 100%;margin: 2px;text-overflow: ellipsis;background: #f0f2f5;> span {flex: 1;overflow: hidden;text-overflow: ellipsis;}> .el-icon-close {-webkit-box-flex: 0;-ms-flex: none;flex: none;background-color: #c0c4cc;color: #fff;} } .lazy-cascader-panel {margin-top: 10px;display: inline-block; }

其實，在自己封裝組件的時候，也會不自覺的學習或者掌握一些東西，還是比較有趣的。

比如，為了解決多選的時候Popover 彈出框錯位的問題，看了Element 的源碼，發現Popover組件有一個updatePopper方法。

而且，封裝組件需要考慮的問題比較多，倒不是說復雜，就是盡可能要全面。

好了，這一篇就寫到這里，至于適用性，我也不能保證，至少很好的解決了cascader級聯動態加載的不足，而且簡化了動態加載的方法，很方便的實現了回顯和搜索。

如果這正是你需要的，或者你預感自己會需要，可以先收藏，對于組件的不足之處也可以交流和討論，以方便我去優化和改進。

總結

以上是生活随笔為你收集整理的elementui 加载中_ElementUI cascader级联动态加载回显和搜索看这个就够了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。