将数组转换为供elementui的树形结构识别的数据,并可点击获取选中id
模板中添加树形标签
<el-tree
:data="data"
show-checkbox
node-key="id"
:props="defaultProps"
ref="treeRef"
>
</el-tree>
方法获取数据
data:
var arr=[
{id:1,fid:null,label:"顶级1"},
{id:2,fid:null,label:"顶级11"},
{id:3,fid:null,label:"顶级111"},
{id:4,fid:null,label:"顶级1111"},
{id:5,fid:1,label:"一级2"},
{id:6,fid:2,label:"一级22"},
{id:7,fid:3,label:"一级222"},
{id:8,fid:4,label:"一级222"},
{id:9,fid:1,label:"一级2***"},
{id:10,fid:5,label:"二级3"},
{id:11,fid:6,label:"二级33"},
{id:12,fid:7,label:"二级333"},
{id:13,fid:10,label:"三级4"},
{id:14,fid:11,label:"三级44"},
{id:15,fid:12,label:"三级444"},
]
var asd = []
for(let i = 0;i<arr.length;i++){
for(let j=0;j<arr.length;j++){
if(arr[i].id==arr[j].fid){
console.log(arr[i].children);
if(!arr[i].children){
arr[i].children=[]
}
arr[i].children.push(arr[j])
}
}
// ==========
if(arr[i].fid==null){
asd.push(arr[i])
}
}
this.data = asd
console.log(asd);
可通过顶级确定事件来获取所有选中的树形框
// 树形控件自带的属性节点选择
const keys = [
...this.$refs.treeRef.getCheckedKeys(),
...this.$refs.treeRef.getHalfCheckedKeys()
]