<template>
<el-tree
:data="data"
node-key="treeId"
:props="defaultProps"
:expand-on-click-node="false"
show-checkbox
ref="objTreeRef"
default-expand-all
@check-change="(item, isChecked) => treeCheckChange(item, isChecked)"
>
</el-tree>
</template>
<script>
export default {
components: {},
data() {
return {
nodeIsCheck: [], // 勾选顺序数组,
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
// 根据树节点勾选顺序保存节点
treeCheckChange(item, isChecked) {
console.log(item, 555555555)
// 勾选顺序
if (isChecked === true) {
this.nodeIsCheck.push(item)
} else {
this.checkedObj.forEach((listItem, listIndex) => {
if (listItem.id === item.id) {
this.nodeIsCheck.splice(listIndex, 1)
}
})
}
const treeList = this.nodeIsCheck.filter(item => {
return !item.children
})
console.log(treeList, 4444444444)
}
}
}
</script>
el-tree根据勾选节点保存节点位置
最新推荐文章于 2024-04-26 16:47:03 发布