• element-ui树结构懒加载


    在实际项目中,往往树结构数据量较大,这时树节点必须懒加载

    element-ui树的懒加载:

    <div style="100%;height:420px;overflow: auto;">
                            <el-tree lazy :load="getOrgList" :props="defaultProps" highlight-current @node-click="handleNodeClick">
                            </el-tree>
    </div>

    js代码如下:

    defaultProps: {
                        children: "children",
                        label: "name"
                    },

    树节点形式为:

     [
            {
                "id": "1",
                "name": "国家电网",
                "status": null,
                "isCheck": null,
                "children": []
            }
        ]

    getOrgList方法如下:

    /**
                 * 懒加载树获取组织机构子节点
                 * element-tree使用方法
                 * @param node:当前点击节点信息
                 * @param resolve:传递参数方法
                 * */
                getOrgList(node,resolve) {
                    /*this.$http.get(`${process.env.NODE_ENV}/admin/org/selectall`)
                        .then((response) => {
                            this.data2 = response.data.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
    */
                    let self = this;
                    console.log(node);
                    if(node.level == 0){
                        self.$http.get(`${process.env.NODE_ENV}/admin/org/selectall`).then(res => {
                            let treeData = []
                            res.data.data.forEach(e => {
                                treeData.push(e)
                            })
                            resolve(treeData);
                        }).catch(res => {
                            resolve([]);
                        })
                    }else{
                        console.log("当前节点id值为:"+node.data.id)
                        self.$http.get(`${process.env.NODE_ENV}/admin/org/selectall/${node.data.id}`).then(res => {
                            let myList = [];
                            res.data.data.forEach(e => {
                                myList.push(e)
                            })
                            resolve(myList);
                        }).catch(res => {
                            resolve([]);
                        })
    
                    }
    
                },

    handleNodeClick方法如下:

                            // 点击树
                handleNodeClick(data) {
                    console.log("点击树节点");
                    console.log(data);
                    this.clickTree = data;
                },                    
  • 相关阅读:
    Golang flag包使用详解(一)
    string rune byte 的关系
    int在64位操作系统中占多少位?
    32位和64位系统区别及int字节数
    /etc/fstab修改及mkfs(e2label)相关应用与疑问
    nginx + fastcgi + c/c++
    MYSQL优化
    mysqlhighavailability
    woodmann--逆向工程
    jdaaaaaavid --github
  • 原文地址:https://www.cnblogs.com/yuwenjing0727/p/9817911.html
Copyright © 2020-2023  润新知