脚本宝典收集整理的这篇文章主要介绍了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)
}
以上是脚本宝典为你收集整理的vue + html 编写仿element select 多选组件全部内容,希望文章能够帮你解决vue + html 编写仿element select 多选组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。