element-ui树形结构动态全部展开收起及添加图标

一：template部分

node-key="id"很重要

<el-tree
:data="sourceData"
:props="{ label: 'label',children: 'children', }"
highlight-current
default-expand-all
ref="selectTree"
:expand-on-click-node="false"
node-key="id"
>
<!-- 插入字体图标 -->
<span slot-scope="{ node }">
<i class="el-icon-s-management"></i>
<span style="padding-left: 5px;">{{node.label}}</span>
</span>
</el-tree>
<el-button @click="unFoldAll">展开全部</el-button>
<el-button @click="collapseAll">全部折叠</el-button>

二：js部分

data () {
return {
sourceData: [{
id: 1,
label: "test1",
children: [{
id: 2,
label: "test2"
}]
}]  //树形结构数组，结构中要带id
}
},
methods: {
// 全部展开
unFoldAll () {
let self = this;
// 将没有转换成树的原数据
let treeList = this.sourceData;
for (let i = 0; i < treeList.length; i++) {
// 将没有转换成树的原数据设置key为... 的展开
self.$refs.selectTree.store.nodesMap[treeList[i].id].expanded = true
}
},
// 全部折叠
collapseAll () {
let self = this;
let treeList = this.sourceData;
for (let i = 0; i < treeList.length; i++) {
self.$refs.selectTree.store.nodesMap[treeList[i].id].expanded = false
}
}
}