构造最简略的el-tree应用, 常常用来显示机构,菜单,省市县等信息
<el-tree ref="tree" :data="treedata" :props="defaultProps2"></el-tree>list: function(){ u.axios.get("http://localhost:6088/treeList").then(function(res){ console.log(res.data); //为什么用push quan.treedata.push(res.data); }); }
后端, 应用正向递归查问
package com.bw.controller;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import com.bw.entity.City;import com.bw.entity.CityExample;import com.bw.entity.CityExample.Criteria;import com.bw.mapper.CityMapper;@RestControllerpublic class CityTreeController { @Autowired CityMapper cityMapper; /** * * 难度系数在 **** * redisTemplate *** * @param city * @return */ public City recur(City city){//city-->父节点 CityExample cityExample=new CityExample(); Criteria criteria = cityExample.createCriteria(); criteria.andPidEqualTo(city.getCityid());//pid= List<City> children = cityMapper.selectByExample(cityExample);//select * from city for (City child : children) { this.recur(child); } city.setChild(children); return city; } @RequestMapping("treeList") public City treeList(){ City city = cityMapper.selectByPrimaryKey(1);//1-->中国的节点 city=this.recur(city); return city; }}
数据库构造
1 中国 02 河北 13 河南 14 山东 15 邯郸 26 石家庄 27 郑州 38 洛阳 39 邯郸一街 510 邯郸二街 5