vue + html 編寫仿element select 多選組件

如今作vue項目主要用的ui框架差很少都是elementui，可是每一個項目設計的不一樣不免和element組件產生差別甚至是大不相同，有的時候差別少好比頁面樣式不太相同，功能使用徹底同樣的話，這樣改改樣式就能夠了，可是要大部分不一樣，並且改出來以後和設計稍差的話就能夠本身來寫了。。。

1. 編寫一下select樹形結構且多選組件，遞歸循環樹形結構數據，無需定義其餘關聯鍵值

   • 樹形數據，幾級均可以
     List: [ // 部門數據

     { value: '河北省',
        children: [
              { value: '唐山市區',
                children: [
                      { value: 'A區',
                        children: [ { value: '111' } ]
                      },
                      { value: 'B區', children: [ { value: '222' } ]
                      },
                      { value: 'C區', children: [ { value: '3333' } ]
                      },
                  ]
              },
              { value: '灤縣區', children: [ { value: '44444' } ]
      }

     ]

   • 遞歸循環添加id 層級，至關於加一個標誌符

     this.departmentList.map((item,index) => {
          item.id = 0;
          item.children && this.checkChild(item.children,item.id);
      })

2. 拿到本身要渲染的數組

// 點擊選項添加數據
    change (val, value, index) {
        // 獲取數據內的層級id
        let id =val.id
        // 提早建立好二維數組防止報錯，後面會進行空數組的清空操做
        this.all.push([])
        this.all[this.num].splice(id, 0, val)
        // 用戶點擊以後是否有子數據，有的話加入Renderingarr渲染子數據，開啓限制
        if(val.children) {
            this.renderingArr.push(val)
            this.isOpenFirst = true
        }
        // 提早建立盛放已選內容的二維數組，功能和all同樣
        this.selectedValue.push([])
        this.selectedValue[this.num].splice(id, 1 , { value, id, num: this.num })
        // this.selectArr.splice(this.num,1, [this.value[this.num][this.value[this.num].length-1]])
        // 存儲每一個已選的最後一位做爲tag
        this.selectArr.splice(this.num, 1, this.selectedValue[this.num][this.selectedValue[this.num].length-1].value)
    }