前言
專案上實作某個功能,使用到了 el-select 和 el-tree 組合實作,記錄下兩者結合的實作程序,
要求
- 根據專案介面提供的資料,el-tree 里的資料是一次性回傳來的,點擊最后一層級時,請求介面,在點擊層級下方追加資料
- 追加的資料要顯示勾選框,可進行勾選,且是單選
- 勾選后需要回傳勾選的層級以及它的父級
實作效果如下:

資料回顯效果:

實作關鍵部分
el-tree里的顯示勾選框不符合當前“追加的資料要顯示勾選框,可進行勾選”這個需求,所以我修改了el-tree的原始碼進行使用,
-
追加子級資料,el-tree 檔案提供了這個這個方法,可以追加子級

-
資料物件里有指定欄位才顯示勾選框,這里我指定欄位為 currentShowCheck,資料追加的時候把指定需要顯示勾選框的欄位加上

修改原始碼,資料中有 currentShowCheck 欄位的則顯示 checkbox

這樣子就實作以上的效果了
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/545069.html
標籤:其他
下一篇:Quill編輯器實作原理初探
