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
      }
    }
}