关于多层上下钻我总结过一篇多次请求数据的： https://www.kancloud.cn/yangyijie/yyj_web/1457082 这次是一次性请求回来数据，一般是数据量比较少的情况，后台把嵌套数据全部返回给前端。虽然这种情况比较少，然而确实遇到了。由于大部分步骤一样，所以此篇建议和上篇一起看，能理解上篇这篇也差不多。 <br/> 上篇的前四个步骤，一至三个步骤都是一样的。麻烦点在于一次性请求回来数据后，每次上钻都要前端来处理，而不是请求后台接口，所以与后台无关了。所以核心在第四个步骤： <br/> **四、面包屑导航点击事件的处理** 先说一下数据结构，一次性请求回来后，数据结构可能是类似于这种： ``` let data = [ { id: "01", name: "哺乳动物" value: 13, children: [ { id: "0101", name: "猫科" value: 5, children: [ { id: "010101", name: "豹" value: 2 } ] } ] } ] ``` 例子是我随便举的，数据有多层，children有多个。虽然每次下钻我们都能很轻易地拿到children的值，然而上钻的时候要怎么处理呢？如何知道此时回到了第几层呢？还是利用标签自定义属性配合数据的id，只不过需要遍历处理。如下： ``` // 处理面包屑导航 handleBread(val) { if (val === "0000") return; // 0000为自己定义，表示最后一层，此时不做任何处理 if (val === "") { // 为空表示第一层，加载全部数据 // 取出originalData，此为第一次请求后台拿到的数据，利用它来处理所需要的数据 let type = []; this.state.originalData.map((item, ind) => { type.push(item.name) }) this.setState({ // graphData为图表所需的数据 graphData: this.state.originalData, type, }, () => { // 调用方法重新初始化图表 this.newGraph(); }) } else { // 如果是其他层数，那就遍历拿出每一项 let result = []; // 存放结果 let queue = [this.state.originalData]; // 用于遍历 let item; // 临时值 while (item = queue.shift()) { // 从队列里取出要转换的数据数组 item.forEach(i => { result.push(i); // 遍历数组，转换数据，放入结果中 i.children && queue.push(i.children);// 如果有子数据的，放到队列最后等待处理 }) } // 利用val来和id进行对比 let children = [], type = []; result.map((item, ind) => { if (item.id === val) { children = item.children; } }) // 此时取出的children就是我们需要的数据 children.map((item, ind) => { type.push(item.name) }) // 保存图表的数据 this.setState({ graphData: children, type, }, () => { // 图表初始化 this.newGraph(); }) } } ``` 顺便补充一下，如果已经下钻到最后一层了，那么需要判断一下。然后标签的写法是： ``` $(".breadcrumb").append("<span class='bread' val='0000'>" + "面包屑名字" + "</span>"); ``` 其他的还是和上篇差不多，只不过自定义属性val的值这次是数据的id，而不是请求参数。