treeSelect樹形選擇器使用

vue-treeselect樹形選擇器

treeSelect是Vue的一個外掛，用於進行一個樹形選擇的場景，這個元件可以滿足大部分場合的使用。
官方文件
1.安裝

npm install --save @riophae/vue-treeselect

安裝完成之後可以在package.json檔案中看到

2.引用，在需要使用的元件上引用

3使用

關於元件屬性，大家可以去官方文件看一下，這裡著重說一下normailzer，normailzer的意思就是是規範化，意思就是使你的資料格式規範化
treeselect定義的格式是如下所示，包含id,label,children三個屬性

options: [ {
        id: 'a',
        label: 'a',
        children: [ {
          id: 'aa',
          label: 'aa'
        }, {
          id: 'ab',
          label: 'ab'
        } ]
      }, {
        id: 'b',
        label: 'b'
      }, {
        id: 'c',
        label: 'c'
      } ]

但是我們的後端小夥伴不一定是按照這三個屬性返回的，加入後端返回的資料格式如下

 options: [{
        label: 'a',
        value: 'aa',
        children: [{
          label: 'b',
          value: 'bb'
        }]
      }]

可以看到，我們的label應該對應id,value應該對應label才會被treeselect認識
所以我們就要用到normailzer屬性了

今天開發運到的一個問題，現在記錄一下，供大家學習參考，剛實習，技術有點菜，在工作中往往因為一點小問題確浪費一大堆時間，現在開始多做筆記，讓自己能夠越來越好，加油，歐力給