elementui 侧面收缩框_elementui中eltree组件节点全展开与全收缩功能实现

目录

一、功能描述

实现： element-ui中el-tree组件全部节点的展开与收缩功能。

版本： "element-ui": "^2.3.7"。

二、代码实现

{{this.expandAll?'收缩':'展开'}}所有节点

export default {

data() {

return {

expandAll: false,

data: [{

label: '一级 1',

children: [{

label: '二级 1-1',

children: [{

label: '三级 1-1-1'

}]

}]

}, {

label: '一级 2',

children: [{

label: '二级 2-1',

children: [{

label: '三级 2-1-1'

}]

}, {

label: '二级 2-2',

children: [{

label: '三级 2-2-1'

}]

}]

}]

};

},

methods: {

// 节点展开

async onExpand () {

try {

await this.$confirm('确认要展开所有节点?', '提示', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning'

})

this.expandAll = !this.expandAll

// 改变每个节点的状态

this.changeTreeNodeStatus(this.$refs.tree.store.root)

} catch (e) {

this.$message({

type: 'info',

message: e === 'cancel' ? '取消操作' : '操作失败'

})

}

},

// 改变节点的状态

changeTreeNodeStatus (node) {

node.expanded = this.expandAll

for (let i = 0; i < node.childNodes.length; i++) {

// 改变节点的自身expanded状态

node.childNodes[i].expanded = this.expandAll

// 遍历子节点

if (node.childNodes[i].childNodes.length > 0) {

this.changeTreeNodeStatus(node.childNodes[i])

}

}

}

}

};

三、最终效果