VUE中使用layui-tree

技术没有好坏，只是不同特性的技术应该用在不同的地方。VUE做树形插件也很方便但是不好用。特别是对于我这个做后端开发的来说，我只想快速的解决一个前端问题而不是永久的解决一个前端问题。

layui和VUE特性不同所以整合到一起使用比较麻烦，所以整合的案例比较少。我不想介绍怎么使用layui-tree在官网有更准确的介绍。下面就把我的踩坑过程详细的记录一下。

我需要在VUE框架下打开这个页面并渲染数据进去

VUE添加layui组件js的部分在网上有介绍，我就不啰嗦了。就记录一些网上没有的

页面代码

    

        
            
                
                    
                        
                    
                
                
                    
                        
                    
                
            
            
                
                    
                
                
                    查询
                
            
            
                

                
            
        
        

            取 消
            确 定
        

    

js代码

//5.主数据类别权限 
        
        var dialogForm4 = new Vue({
            el: '#dialogForm4',
            data: {
                dialogFormVisible: false,
                form: {
                    name: '',
                    code: '',
                },
                parm: [],
                roleid: '',
                search: '',
                searchflag:'N',
                treeLoading: false,
                saveLoading: false
            },
            created() {
                
            },
            laytree:null,
            mounted() {
                this.$nextTick(()=>{
                    layui.use("tree",()=>{
                        laytree=layui.tree;
                    })
                })
            },
            updated() {

            },
            methods: {                
                queryTree: function () {//渲染数据到树形结构
                    let that = this;                    
                    let datatree = [];
                    if (that.search == '') {
                        $.ajax({
                            url: Role.Url.typeJurisdiction,
                            type: 'get',
                            async: false,
                            data: {
                                uid: JSON.parse($.cookie('info')).id,
                                rid: that.roleid,
                                supper:'0'
                            },
                            xhrFields: { //带cookie请求
                                withCredentials: true,
                            },
                            dataType: 'json',
                            success: function (res) {
                                if (res.code == 0) {
                                    datatree=res.data;
                                };                            
                            }
                        });
                    } else {
                        $.ajax({
                            url: Role.Url.typeCodeOrName,
                            type: 'post',
                            async: false,
                            data: {
                                cn: that.search,
                                uid: JSON.parse($.cookie('info')).id
                            },
                            xhrFields: { //带cookie请求
                                withCredentials: true,
                            },
                            dataType: 'json',
                            success: function (res) {
                                $('#dialogForm4 .el-dialog').mLoading("hide");
                                if (res.code == 0) {
                                    datatree = res.data;
                                    //dialogForm4.searchflag='Y';
                                    //dialogForm4.rootData=res.data;
                                    //dialogForm4.$refs.rootTree.setCheckedKeys(res.data);        
                                }
                            }
                        });
                    }
                    //layui.use('tree', function () {
                    //    let laytree = layui.tree;                        
                        laytree.render({
                            elem: '#test3',
                            data: datatree,
                            showCheckbox: true, //是否显示复选框
                            onlyIconControl: true,
                            id: 'treeid',
                            oncheck: function (obj) {
                                //alert(JSON.stringify(obj.data.id))
                                //that.parm = tree.getChecked('id4');
                                //alert(1);
                            }
                        });
                    //});    
                },                                
                getCheckup: function () {//保存角色类别权限
                    let that = this;
                    alert(JSON.stringify(laytree.getChecked('treeid')))//到这里后边没写完需要修改
                    let parm = getChildNodes(that.parm, []);
                        alert(parm);
                    // 动画
                    that.saveLoading = true;
                    // 请求接口
                    $.ajax({
                        url: Role.Url.saveTypeJurisdiction,
                        type: 'post',
                        //contentType: 'application/json',
                        async: true,
                        data: {
                            uid: JSON.parse($.cookie('info')).id,
                            roleid: that.roleid,
                            ids: JSON.stringify(parm)
                        },
                        xhrFields: { //带cookie请求
                            withCredentials: true,
                        },
                        dataType: 'json',
                        success: function (res) {
                            that.saveLoading = false;
                            if (res.code == 0) {
                                that.$message({
                                    message: '保存成功',
                                    type: 'success'
                                });
                                that.dialogFormVisible = false;
                            } else {
                                that.$message({
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        }
                    })
                }
            },
            
        });
    }

之前我把layui-tree写在函数里在另一个函数就调用不了。把layui-tree的注册写到data{}又报错。

我把layui-tree声名成一个VUE内置对象laytree在VUE的mounted里边注册layui组件。在methods里边实例化使用和调用