vue2+springboot实现el-tree的分页查询、模糊查询

本篇内容仅展示前端代码，后端代码链接放评论区

运行结果如图

点击左边的部门树 实现对该部门员工的分页查询

HTML代码如下

el-tree所用的参数解析

 

 

html代码

​

            
            
            
                
                    {{ data.deptName }}
                    
                        
                        
                        
                        
                        
                        
                    
                
            
        
        

            
            

                
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        查询
                    
                    添加成员
                
            
            
            

                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                        
                        
                    
                
            
        
        
        
        

            页数
            
            
        

​

 JS代码

    data() {
        const data = [];
        return {
            current_node_key: 1, //默认选中id
            treeProps: {
                children: 'childNode',
                label: 'deptName',
            },
            mdata: [], //列表数据，将后台获取到的员工信息数据渲染到el-table
            dn: [], //列表数据，将后台获取到的部门名信息数据渲染到添加成员弹窗的部门名框
            pn: [], //列表数据，将后台获取到的部门名信息数据渲染到添加成员弹窗的部门名框
            //分页
            pagination: {
                pageNum: 1,
                pageSize: 10,
                total: 20,
            }, 
            //模糊查询
            formData: {
                deptName: '',
                positionName: '',
            },
        };
    },
    created() {
        this.getDeptList();
    },
    watch: {
        //监听current_node_key，写在mounted里获取不到选中的id
        current_node_key(newVal) {
            if (newVal.toString()) {
                this.$refs['tree'].setCurrentKey(newVal);
            } else {
                this.$refs['tree'].setCurrentKey(null);
            }
        },
    },
    methods: {
        //模糊查询
        onSubmit() {
            // console.log('aaa', data.deptId);
            let deptName = this.formData.deptName;
            let positionName = this.formData.positionName;
            // let deptId = data.deptId
            let page = this.pagination.pageNum;
            let size = this.pagination.pageSize;
            common.fuzzyQuery({ page, size, deptName, positionName }).then((res) => {
                this.mdata = res.data.records;
            });
        },
        //点击获取树节点信息
        handleNodeClick(data, node) {
            this.current_node_key = data.id;
            this.selectPage();
        },
        //分页
        selectPage() {
            let size = this.pagination.pageSize;
            let page = this.pagination.pageNum;
            let deptId = this.current_node_key;
            // console.log('data', data);
            // console.log('node', node);
            common.selectPage(deptId, page, size).then((res) => {
                // console.log('res', res.code);
                // console.log('res', res.data.records);
                if (res.code === 200) {
                    this.mdata = res.data.records;
                }
            });
        },
        //获取每页的条数
        handleSizeChange(pageSize) {
            // console.log('pageSize:' + pageSize);
            this.pagination.pageSize = pageSize;
            this.handleNodeClick();
            this.selectPage();
        },
        //获取页数
        handleCurrentChange(currentPage) {
            // console.log('currentPage:' + currentPage);
            this.pagination.pageNum = currentPage;
            this.handleNodeClick();
            this.selectPage();
        },

        //获取部门树
        getDeptList() {
            common.getDepartment().then((res) => {
                this.data = res.data.data;
                // console.log(this.data);
                // console.log('res', res);
            });
        },
    }

css代码 

b {
    font-size: 1.5em;
}
.left {
    width: 18%;
    float: left;
}
.right {
    width: 82%;
    float: left;
}
.top {
    float: right;
}
.el-input__inner {
    height: 30px;
}
.t {
    height: 35px;
}
.i {
    float: right;
}
.el-tree-node {
    border-bottom: 1px solid rgb(103, 100, 100);
    height: 30px;
}
.el-button--text {
    color: #0f9eca;
}
.el-input {
    width: 200px;
}

.el-form-item {
    margin-bottom: 5px;
}
.el-dialog__body {
    padding: 0px 0px;
}
.el-dialog {
    width: 520px;
    height: 480px;
}

参考文章

*展示树形数据
1.https://blog.csdn.net/wenonepiece/article/details/113179522

*分页
1.http://www.codebaoku.com/it-js/it-js-263024.html
2.https://blog.csdn.net/Curtisjia/article/details/104136407
3.https://blog.csdn.net/Giraffe0615/article/details/126605234

*模糊查询
1.https://www.cnblogs.com/Rosemajor/p/13590782.html
2.https://blog.csdn.net/zhangchang0516/article/details/125898198?ops_request_misc=&request_id=&biz_id=102&utm_term=springboot%E2%9E%95vue%E6%A8%A1%E7%B3%8A%E6%9F%A5%E8%AF%A2&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-4-125898198.142^v87^insert_down28v1,239^v2^insert_chatgpt&spm=1018.2226.3001.4187

希望对大家有帮助