vue搜索树形结构

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>