vue + html 编写仿element select 多选组件

现在做vue项目主要用的ui框架差不多都是elementui，但是每个项目设计的不同难免和element组件产生差异甚至是大不相同，有的时候差异少比如页面样式不太相同，功能使用完全一样的话，这样改改样式就可以了，但是要大部分不同，而且改出来之后和设计稍差的话就可以自己来写了。。。编写一下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); })拿到自己要渲染的数组 // 点击选项添加数据 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) }