后端返回的json数据 用vue+element实现树形菜单

先上需要实现的效果图：
左侧是一个树形菜单，右侧为一个表格。
初次写树形菜单，用了很久很久……
图1

//html部分
//注意：ngs组件是公司封装好的，可以在element等网站找找组件
 <ngs-border-layout>
    <!-- 左侧树形菜单 -->
    <ngs-border-layout-panel region="west" :size="300" :min-size="200">
      <div class="pm-roles-west ngs-panel">
      
      //el-tree用的element组件
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small">
        </el-input>
        /*
		:data--将接收到的正确数据渲染到页面
		default-expand-all--是否默认展开所有节点
		highlight-current--是否高亮当前选中节点
		:props="defaultProps"--配置选项，应该也可以不定义，有默认的
		:filter-node-method="filterNode"--对树节点进行筛选时执行的方法
		 @node-click="handleNodeClick"--节点点击事件
		*/
        <el-tree class="filter-tree" ref="tree" :data="treeData" default-expand-all highlight-current
          :props="defaultProps" node-key="id" :expand-on-click-node="false" :filter-node-method="filterNode"
          @node-click="handleNodeClick">
        </el-tree>
      </div>
    </ngs-border-layout-panel>

//js部分
export default {
	data() {
	    return {
	      //el-tree树形菜单
	      filterText: '',
	      treeData: [ //接受正确数据交给页面展示，格式为 data:[{pId,pName,children:[{sId1,sName1},{sId2,sName2},{}...]}]
	        {
	          //父节点：正常是从后端数据获取，因为此案例只有一个父节点，所以图简单写固定死了
	          id: 'root',
	          label: '监督指导类别',
	          //子节点：
	          children: []
	        }
	      ],
	      
	      defaultProps: {
	        children: 'children',
	        label: 'label'
	      },
	
	
	created() {
	    this.getTreesMenu();//页面刚进来就先加载这个方法函数
	  },
	 watch: {
	    //过滤与filterNode搭配
	    filterText(val) {
	      this.$refs.tree.filter(val);
	    }
	  },
	  methods: {
	    //获取树形菜单
	    getTreesMenu() {
	      api.getTreesInfo((result) => {
	        // console.log(result);
	        var jsonObjs = JSON.parse(result);//JSON.parse() 方法用于将后台返回的 JSON 字符串转换为对象。
	        let newList = [];//定义一个新数组用来存放遍历的数据
	        for (let i = 0; i < jsonObjs.datas.length; i++) {//datas是根据后端返回的数据来的（图2）
	        //为了将一个完整对象传入到children这个数组
	        //一开始我拼接成了字符串，怎么都放不进去，后面请教了下面这种格式
	          newList[i] = { id: jsonObjs.datas[i].LVL_ID, label: jsonObjs.datas[i].NAME };
	          //LVL_ID是节点的id值，NAME是节点的名称，注意后端返回的数据这个区分大小写
	          //从返回的数据遍历出来就是{id:"001",label:"人大"}放入数组第一个位置，...循环放
	        }
	        //最终把遍历出来完整的对象放到data数组的第一处也就是此案例唯一的父节点下面的children位置
	        this.treeData[0].children = newList;
	      })
	    },
	    //过滤
	    filterNode(value, data) {
	      if (!value) return true;
	      return data.label.indexOf(value) !== -1;
	    },
	}

---

图2

完结撒花~