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)
    }