vue搜索树形结构
前台代码
引入js文件
<script th:src="@{/ajax/libs/elementui/js/vue.js}"></script>
<script th:src="@{/ajax/libs/elementui/js/axios.js}"></script>
<script th:src="@{/ajax/libs/elementui/js/elementui(1).js}"></script>
树结构
<script>
new Vue({
el: "#app",
data() {
return {
treeData: null,
defaultProps: {
children: 'children',
label: 'name'
},
queryData: {
// id:"",
name: ""
},
}
},
methods: {
handleNodeClick(data) {
console.log(data);
if(data.$treeNodeId === 1 ){
// 你点击第一层节点执行的操作
$.ajax({
// 详情查看
url: prefix+"media/frame/list",
type: "POST"
})
}else if (data.$treeNodeId === 2 ) {
// 点击第二层节点执行的操作
$.ajax({
// 详情查看
viewUrl: prefix+""
})
}else if (data.$treeNodeId === 3 ){
//点击第三层节点执行的操作
$.ajax({
// 详情查看
viewUrl: prefix+""
})
}else if (data.$treeNodeId === 4 ){
//点击第四层节点执行的操作
$.ajax({
// 详情查看
viewUrl: prefix+""
})
}else if (data.$treeNodeId === 5 ){
//点击第五层节点执行的操作
$.ajax({
// 详情查看
viewUrl: prefix+""
})
}
},
fetchData() {
axios.post("/media/place/list", this.queryData).then(response => {
this.treeData = response.data.rows;
})
},
}
})
</script>
<script>
document.getElementById("$treeNodeId === 1").onclick=function () {
$.ajax({
//增加
creatUrl: prefix+"",
//编辑
editUrl: prefix+"",
//删除
removeUrl: prefix+""
})
},
document.getElementById("$treeNodeId === 2").onclick=function(){
$.ajax({
//增加
creatUrl: prefix+"",
//编辑
editUrl: prefix+"",
//删除
removeUrl: prefix+""
})
}
</script>
controller层
/**
* 查询树形位置列表
*/
@RequiresPermissions("media:place:list")
@PostMapping("/list")
@ResponseBody
public TableDataInfo list(@RequestBody Project project) {
startPage();
List<Place> list = placeService.selectPlaceList(project);
return getDataTable(list);
}
service层
/**
* 查询树形位置列表
*
* @param place 树形位置信息
* @return 树形位置集合
*/
public List<Place> selectPlaceList(Place place);
impl
@Override
public List<Place> selectPlaceList(Place place) {
//先查询符合条件的place
List<Place> placeList=placeMapper.selectPlaceList(place);
//遍历place列表，查询每个place的下级列表
for(Place p:placeList){
//查询条件是上级ID是该place的ID
Place tempPlace=new Place();
tempPlace.setPid(p.getId());
p.setChildren(selectPlaceList(tempPlace));
}
return placeList;
}
mapper层
public List<Place> selectPlaceList(Place place);
注意事项
<sql id="selectPlaceVo">
select id, pid, tree, name, grade, sort, position_type, did, disabled, has_addGarage from kj_place
</sql>
