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

共计 1124 个字符，预计需要花费 3 分钟才能阅读完成。

现在做 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)
}