element-ui中树状图el-tree的使用（vue2）

热乎的，话不多说上代码
html部分：

  // data:展示的数据
  // accordion:是否每次只打开一个同级树节点展开
  // props:配置选项 默认值
  // expand-on-click-node:默认为true，值为false时点击小箭头才会展开收缩节点
  // filter-node-method:返回true节点可以显示,false节点会被隐藏
  // node-key:每个树节点的唯一标识
  // default-expand-all:是否默认展开所有节点，默认值为false
  // highlight-current: 选中节点是否高亮，默认值为false
  // @node-click:点击目录时的操作
  <el-tree
          :data="outlineContentList"
          accordion
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="mulucaozuo"
        >
  </el-tree>

2.在script中

<script>
// 引入树状图列表（目录）接口
import { pageOutline } from '@/utils/api.js'
export default{
  data(){
   return{
      defaultProps:{
        children:"children",
        label:"outlineName" 
     },
     //目录Id （接口提供的目录id名称）
     outlineId：null,
     //目录列表（自定义名称）
     outlineList:[],
     courseId:null,// 接口需要的参数
   }
 },
 created(){
 // 初次加载函数调用
  this.getCatague()
 },
 // 方法
 methods:{
 //（树状图列表）目录
   getCatague(){
   // 目录接口（标头传参)
    pageOutline(this.courseId).then(res=>{
     this.outlineList=this.hanldeTree(
       let config={
        id:id || "id",
        parentId: parentId || "parentId",
        childrenList: children || "children",
      };
      var childrenListMap = {};
      var nodeIds = {};
      var tree = [];

      for (let d of data) {
      let parentId = d[config.parentId];
      if (childrenListMap[parentId] == null) {
          childrenListMap[parentId] = [];
         }
         nodeIds[d[config.id]] = d;
         childrenListMap[parentId].push(d);
      }
      
      for (let d of data) {
      let parentId = d[config.parentId];
      if (nodeIds[parentId] == null) {
          tree.push(d);
        }
      }
      
      for (let t of tree) {
        adaptToChildrenList(t);
      }
      // console.log(childrenListMap, "data");
        function adaptToChildrenList(o) {
        if (childrenListMap[o[config.id]] !== null) {
          o[config.childrenList] = childrenListMap[o[config.id]];
        }
        if (o[config.childrenList]) {
          for (let c of o[config.childrenList]) {
            adaptToChildrenList(c);
          }
        }
      }
      return tree;
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点点击事件
    mulucaozuo(row) {
      this.loading = true;
      (this.outlineId = row.outlineId), this.detailedInformation();
      },
     )
   })
  }
 }
}
</script>

实现效果：

点击左侧目录出现对应的内容
固定方法就放心用吧！