vue+element的树结构根据选择的getCheckedNodes判断在第几层
vue+element的树结构拆为三层我是按照label来拆分的 其他逻辑类似<el-tree:data="data"show-checkboxnode-key="id"ref="tree"highlight-current:props="defaultProps"@node-click="nodeClick"@check-change="checkChange"></el-tr
·
vue+element的树结构根据选择的getCheckedNodes判断在第几层
我是按照label来拆分的 其他逻辑类似
<el-tree
:data="data"
show-checkbox
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
>
</el-tree>
<el-button @click="getBtnClick">获取</el-button>
data() {
return {
obj1:[],
obj2:[],
obj3:[],
mark:new Set(), // 本想这用他的add,has,clear 后来麻烦改了
value:"",
obj1Mark:[],
obj2Mark:[],
obj3Mark:[],
data: [{
id: "一级1",
label: '一级1',
children: [{
id: '二级1-1',
label: '二级1-1',
children: [{
id: '三级1-1-1',
label: '三级1-1-1'
}, {
id: '三级1-1-2',
label: '三级1-1-2'
}]
}]
}, {
id:'一级2',
label: '一级2',
children: [{
id: '二级2-1',
label: '二级2-1'
}, {
id: '二级2-2',
label: '二级2-2'
}]
}, {
id: '一级3',
label: '一级3',
children: [{
id: '二级3-1',
label: '二级3-1'
}, {
id: '二级3-2',
label: '二级3-2'
}]
},{
id: "dsda",
label: 'dsdadsda'
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods:{
getBtnClick(){
let halfCheckedKeys = this.$refs.tree.getCheckedNodes();
// 每次点击的时候清空防止重复赋值
this.obj1 = []
this.obj3 = []
this.obj2 = []
this.checkedNodesValue(this.data,halfCheckedKeys,0)
// 每次点击的时候去重防止重复赋值以防万一
this.obj1 = [...new Set(this.obj1)] // 第一层
this.obj2 = [...new Set(this.obj2)] // 第二层
this.obj3 = [...new Set(this.obj3)] // 第三层
},
checkedNodesValue(data,halfCheckedKeys,level){
if (level == 3) return;
for(let i = 0; i < data.length; i++){
let temp = data[i]
for(let a = 0 ;a < checkedNodes.length;a++){
let check = checkedNodes[a]
if(level == 0){
if(temp.label == check.label){ //这是为了两个值是不是相等 没有就直接走else递归条件 获取第一层
this.obj1.push(check.label)
} else {
// 三目的作用是判断当前有没有children属性没有的话为[]防止for循环报错
this.checkedNodesValue((temp.children ? temp.children :[]),checkedNodes,level+1)
}
} else if(level == 1){
if(temp.label == check.label){
this.obj2.push(check.label) // 获取第二层
} else {
this.checkedNodesValue((temp.children ? temp.children :[]),checkedNodes,level+1)
}
} else if (level == 2){
if(temp.label == check.label){
this.obj3.push(check.label)// 获取第三层
} else {
this.checkedNodesValue((temp.children ? temp.children :[]),checkedNodes,level+1)
}
}
}
}
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)