vue搜索樹形結(jié)構(gòu)

前臺代碼
引入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>

樹結(jié)構(gòu)

<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 ){
                    // 你點擊第一層節(jié)點執(zhí)行的操作
                    $.ajax({
                        // 詳情查看
                        url: prefix+"media/frame/list",
                        type: "POST"
                    })
                }else if (data.$treeNodeId === 2 ) {
                    // 點擊第二層節(jié)點執(zhí)行的操作
                    $.ajax({
                        // 詳情查看
                        viewUrl: prefix+""
                    })
                }else if (data.$treeNodeId === 3 ){
                    //點擊第三層節(jié)點執(zhí)行的操作
                    $.ajax({
                        // 詳情查看
                        viewUrl: prefix+""
                    })
                }else if (data.$treeNodeId === 4 ){
                    //點擊第四層節(jié)點執(zhí)行的操作
                    $.ajax({
                        // 詳情查看
                        viewUrl: prefix+""
                    })
                }else if (data.$treeNodeId === 5 ){
                    //點擊第五層節(jié)點執(zhí)行的操作
                    $.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>