摘要：封裝組件系列文章如何實現(xiàn)一個這樣的級聯(lián)組件組件背景根據(jù)產(chǎn)品原型實現(xiàn)一個級聯(lián)組件，下面看演示圖應用場景很多，如后臺管理系統(tǒng)，旅游系統(tǒng)，廣告投放系統(tǒng)，營銷系統(tǒng)等，現(xiàn)在流行，，三大框架，下面看看怎么使用實現(xiàn)實現(xiàn)邏輯產(chǎn)品經(jīng)理的評審功能需求如下根據(jù)大

Vue封裝組件系列文章

如何實現(xiàn)一個這樣的級聯(lián)組件

根據(jù)產(chǎn)品原型實現(xiàn)一個級聯(lián)組件，下面看演示圖

應用場景很多，如：后臺管理系統(tǒng)，旅游系統(tǒng)，廣告投放系統(tǒng)，營銷系統(tǒng)...等，現(xiàn)在流行Vue，React ， Anagular 三大框架，下面看看怎么使用Vue實現(xiàn)

產(chǎn)品經(jīng)理的評審功能需求如下

根據(jù)大分類到子分類層級選擇，無層級限制（根據(jù)UI的橫板寬度，適合做多級，但深度很深的場景并不多）

每個層級支持全選，根據(jù)子級可以推導全選項選中，并對其父級執(zhí)行選中操作

已選層級可顯示出結果列表，可對其結果操作，并有快速清空結果功能

分類名稱字數(shù)并不做限制，待選區(qū)域分類名稱應在該項中居中顯示，長度過長換行顯示

結果選項結構簡化，每項固定一行，過長在尾部出現(xiàn)...代表過長，鼠標移上時顯示全部內(nèi)容

Vue.js 的核心包括一套“響應式系統(tǒng)”。

"響應式"，開發(fā)思路跟Jquery的開發(fā)思路完全不同。

“響應式”，是指當數(shù)據(jù)改變后，Vue 會通知到使用該數(shù)據(jù)的代碼。例如，視圖渲染中使用了數(shù)據(jù)，數(shù)據(jù)改變后，視圖也會自動更新。

根據(jù)地區(qū)數(shù)據(jù) JSON 可以看出其結構

[
  {
    "value": "中國",
    "key": 1156,
    "id": 1156,
    "children": [
      {
        "value": "北京市",
        "id": 10000,
        "key": 10000,
        "children": []
      },
      {
        "value": "河北省",
        "key": 200107,
        "id": 200107,
        "children": [
          {
            "value": "石家莊",
            "key": 20010701,
            "id": 20010701
          },
          {
            "value": "唐山市",
            "key": 20010702,
            "id": 20010702,
            "children": [
               {
                  "value": "路南區(qū)",
                  "key": 2001070201,
                 "id": 2001070201,
                  "children": []
               }
            ]
          }
        ]
      }
    ]

中國

直轄市

xx省

xx市

xx區(qū)

xx市

xx縣

這是一個循環(huán)嵌套的數(shù)據(jù)對象，而組件嵌套似乎不能滿足產(chǎn)品需求，如果使用數(shù)組來代替層級，似乎可以解決數(shù)據(jù)嵌套的問題

array => level 1 -> level 2 -> level 3 -> level 4

level 1 => current， children => level 2 (array)
level 2 => current， children => level 3 (array)
...

每個level 都是一個整體，
有標題 title
有全選 計算data中是否都選中 select
子集的集合數(shù)據(jù) data
有當前選中 current
標記當期層級 數(shù)組的索引  level

首先定義個空的數(shù)組代表組件

const array = []

把數(shù)據(jù)處理成數(shù)組格式就能展開這個組件，那怎么處理數(shù)據(jù)呢
初始化組件時不是所有都顯示，必須讓用戶選擇當前一個頂級大類

拿到所有頂級大類，并構建第一個元素

title = 省級
data = 頂級大類
current = 空
level = 1
select = false

array.push({title, select, data, current, level})

在選擇頂級大類時，給這個數(shù)組增加其一個子集元素

array.push({title, select, data, current, level})
...

依次類推

獲取組件的選擇結果，
可以過濾數(shù)據(jù)的check 屬性得到，
可使用Vue的計算屬性得知隨時的結果

結果選擇框可以直接綁定已選的計算組件，可構建結果UI

主組件

布局組件

選擇項

用來負責組件框架， 左右分欄，
左邊是選擇區(qū)域， 右邊是結果區(qū)域
這個是組件引用層，統(tǒng)一對外提供導入props 數(shù)據(jù) 和 導出的 emit 事件
組件需要做到完全配置化，內(nèi)部所以參數(shù)需要被抽象

選擇區(qū)

更具層級平均分配空間，所有在橫向固定空間中，不能做過多的層級，太窄了沒法顯示
因為需要循環(huán)顯示其層級，抽離層級為布局組件，布局組件由 標題 和 滾動的選擇區(qū)域 組成

結果區(qū)

在有選擇時才顯示，有標題欄顯示，結果區(qū)可統(tǒng)計結果個數(shù)，選擇項使用Tag標簽，支持快速刪除，建立縱向滾動條
可使用布局組件 與選擇區(qū)保持風格統(tǒng)一，

要兼容選擇區(qū)與結果區(qū)使用，所以統(tǒng)計個數(shù)得有開關控制，
邊框，顏色 UI 控制

抽象 清空按鈕UI
抽象 統(tǒng)計個數(shù)UI

最關鍵的組件就算這個了

v-model 綁定數(shù)據(jù)的好處是： 數(shù)據(jù)在內(nèi)部發(fā)生了改變，而在原始端同樣改變了，只要使用就可以了，
當然在使用上也有些不方便的地方，
props導入的數(shù)據(jù)，通過什么props 屬性接收呢， value

...
props: {
  value: {
    type: Array
  }
}
...

在組件內(nèi)部是不能Set 改變的，只能通過事件傳到父組件中來
通過什么方法名來傳呢， input (初級很多人不知道)
this.$emit("input", val)

在初始化過程中，構建第一層級組件的 title data current level
假使省市json 數(shù)據(jù)為 cityJson 構建第一層級的data

const data = this.cityJson.map(ret => {
  delete ret.children
  return ret
})

當用戶選擇層級的 item 時觸發(fā) 動作新增層級數(shù)據(jù)
當用戶選中層級的 item 時觸發(fā) 動作新增層級數(shù)據(jù) 選中該層級下所有數(shù)據(jù)

貼上所有源代碼，難免里面有些引用的文件，如果不能直接使用，請不要噴，因為這篇文章不是送個伸手黨的，是你有一定的基礎，想提升一下技能的你

半選功能

在一個大分類的子分類里選擇的分類，但是切到別的大類項，雖然結果框里有選擇的分類，但是待選的框里還是不能顯示子集，需求上線后，客戶反應體驗不好，所以就研究了復選框的 半選狀態(tài)，其實改起來很簡單，只要在計算屬性的加個布爾值顯示半選，布爾值就是該分類的data里是否有選中的項check = true

行內(nèi)文本過長，換行顯示優(yōu)化
因為分類的字數(shù)沒有限制，做前端其實不能相信用戶，同時也不能相信后端返回給的數(shù)據(jù)，也不能相信產(chǎn)品，在產(chǎn)品沒有碰到過字數(shù)限制的功能時候產(chǎn)生的問題時，都是期待著用戶是個正常的用戶的。

文本過長有兩種方式解決：

在文本區(qū)域設置固定寬度，在超過長度顯示... （如果要顯示全，只能增加鼠標懸停顯示功能了）

在item 行的高度不使用line-height的參數(shù)，用padding 做上下間隔后，讓文本自動換行 （這樣的問題是，右手邊圖標的居中問題，字數(shù)太多就會加高item項，美觀度沒那么統(tǒng)一）

很多前端新人都接觸Vue一年、甚至兩年多才會使用像element ui、iview、vant開源的UI基礎庫，但細心的你可能發(fā)現(xiàn)，這些只適合參照原型圖實現(xiàn)html編碼，但業(yè)務的層次抽離、邏輯的復用、組件化業(yè)務層方面都沒有手把手教我們上路。

三大流行框架的核心是快速地組件化開發(fā)，而我們只是簡單的在路由組件頁面堆積UI庫的組件嗎，顯然這不是我們想要的高效開發(fā)。一個項目可以大到100多個頁面，如果不抽離組件，重復工作量不可預估，效率更是談不上了。那么如何像作者一樣能更深層次使用Vue呢，其實element ui的開源庫，每一個組件的實現(xiàn)其實都是很基礎的方法實現(xiàn)的，假如你要實現(xiàn)這樣的基礎庫，你就會想辦法去看源代碼，看著看著你就學會了作者的很多思想，那還會有什么的組件實現(xiàn)不了了？

師傅領進門，修行靠個人，人人都是我們的老師。不知你是否贊成...

以上，歡迎拍磚~

歡迎關注我的開源倉庫
GITHUB：xiejunping (Cabber) · GitHub
微信二維碼： 掃碼添加好友，交個朋友