需求
實現點擊一級域顯示二級域，點擊二級域顯示三級域，以此類推。需要完成一個通用版多級域的聯動。
思路
- 數據結構是可以自己定義，所以首先需要考慮所需要的數據結構。
- 自己定義的數據結構為：
dataSource: [
{id: 1, domain: "一級域1", children: [{id: 11, domain: "二級域11", children: [{id: 111, domain: "三級域111"}]}, {id: 12, domain: "二級域12", children: [{id: 112, domain: "三級域112", children: [{id: 1111, domain: "四級域1111"}]}]}]},
{id: 2, domain: "一級域2", children: [{id: 21, domain: "二級域21", children: [{id: 211, domain: "三級域211"}]}, {id: 22, domain: "二級域22", children: [{id: 212, domain: "三級域212"}]}]},
{id: 3, domain: "一級域3", children: [{id: 31, domain: "二級域31", children: [{id: 311, domain: "三級域311"}]}, {id: 32, domain: "二級域32", children: [{id: 312, domain: "三級域312"}]}]},
{id: 4, domain: "一級域4", children: [{id: 41, domain: "二級域41", children: [{id: 411, domain: "三級域411"}]}, {id: 42, domain: "二級域42", children: [{id: 412, domain: "三級域412"}]}]},
{id: 5, domain: "一級域5", children: [{id: 51, domain: "二級域51", children: [{id: 511, domain: "三級域511"}]}, {id: 52, domain: "二級域52", children: [{id: 512, domain: "三級域512"}]}]}]
以此可直接取到對象的下一級域
-
需要記錄一個數組
data來渲染上級當前級下級的域名data: [[一級域], [二級域], [三級域]...] -
需要記錄一個已選擇的域來渲染當前級已選擇的域
selectItems: ["一級域1", "二級域1"] -
渲染出來的組件中添加點擊事件，此時可以拿到當前點擊的對象，點擊域的層級，index索引值。而后獲取到當前對象后，若當前對象有
children則截取數組data至當前對象這一層級(點擊事件可以獲取到)，並將當前對象的children記錄到data中的下一級域，此時即可實現聯動，selectItems中記錄當前對象的domain以渲染當前域選中的域名。
完成后的自查
對數據結構這一部分敏感性有待加強，因為考慮數據問題而花費了太多的時間，主要是這個數據結構的思路影響了整個組件的進度。