【elementUI Tree 树形控件 动态加载数据、懒加载&&动态操作后局部刷新树结构】

elementUI Tree 树形控件 动态加载数据&&进行操作后局部刷新树结构——结合codemirror

//el-tree
 <el-tree :data="list" :props="props" :load="loadNode" lazy @node-click="handleBucketClick">
                        </el-tree> 
//codemirror                        
 <textarea ref="code" class="codesql public_text" v-model="code"></textarea>

    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type=text/css> 
        /* hover*/
        .el-tree-node__content:hover,
        .el-upload-list__item:hover {
   
            background-color: #e8f2ff;
            color: rgb(96, 98, 102);
        } 

        /* 当前选中高亮 */
        .el-tree-node:focus>.el-tree-node__content {
   
            background-color: #1e9fff;
            color: #fff;
        }
        
        .is-expanded .is-current>.el-tree-node__content {
   
            background-color: #1e9fff;
            color: #fff;
        }
    </style>

//script
    new Vue({
   
            el: '#app',
            data: function () {
   
                return {
   
                    code: '', //codemirror值
                    editor: '',//codemirror
                    codeType: '',//代码类型

                    list: [],//树结构--数组
                    props: {
   
                        label: 'name',//指定节点标签为节点对象的某个属性值
                        children: 'zones',//指定子树为节点对象的某个属性值
                        isLeaf: 'leaf',//指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
                    },
                    
                    prev_path: '',// 预览路径
                    curr_clickData: {
   },//当前点击数据
                    curr_node: {
   },//当前点击节点
                    curr_file: '',//当期那编辑器内的文件
                }
            },
            methods: {
   
                //当点击的是最末级节点的时候，获取此节点的id赋值给列表对象的属性，再调用load方法来实现过滤查询的功能。
                handleBucketClick: function (data, node) {
   
                    console.log('点击节点', data, node, this.list);
                    //dir:定义的是否是文件夹类型（DIR：文件夹，FILE：文件）
                    if (!data.dir) {
   
                        this.getTreeData(node, "FILE", data.pathName, "",); // 这里返回的是子节点childens集合 
                        this.codeType = data.id.split('.')[data.id.split('.').length - 1];//判断当前代码文件是什么类型
                        
                        this.curr_file = data.pathName;
                        this.prev_path = data.pathName;// 预览
                        this.curr_clickData = data;//当前点击数据
                        this.curr_node = node;//当前点击数据
                    }


                },
                //
                loadNode(node, resolve) {
   
                    // console.log('loadNode', node.level);
                    // 初始状态0---第一次触发
                    if (node.level === 0) {
   
                        this.getTreeData('L0', "DIR", "", "", resolve); // 这里返回的格式为 [{...}] 
                    } else {
    
                        if (!node.data.dir) {
   
                            // 不是根节点
                            return resolve([]);//返回[]停止转圈
                        } else {
   
                            //如果是根节点 
                            if (node.level > 0) {
   
                                setTimeout(() => {
   
                                    this.getTreeData(node, "DIR", node.data.pathName, "", resolve); // 这里返回的是子节点childens集合
                                }, 200);
                            }
                        }
                    }

                },
                // 初始
                getTreeData: function (node, opt, path, content, resolve) {
   
                    var that = this;
                    // console.log(node); 
                    var loadIcon1 = layer.load(2);
                    var d = {
   
                        "opt": opt,
                        "path": path,
                        "content": content
                    };
                    $.ajax({
   
                        type: 'POST',
                        url: '/FileEdit',
                        data: JSON.stringify(d),
                        contentType: "application/json; utf-8",
                        timeout: 10000,
                        success: function (data1) {
   
                            // console.log(data1);
                            layer.close(loadIcon1);
                            var res = $.parseJSON(data1);
                            // console.log(res);
                            if (res.rt == 0) {
   


                                if (opt === 'DIR') {
   
								 //第一级
                                    if (node === 'L0') {
   
                                        var arr1 = [];
                                        var arr2 = [];
                                        for (var i = 0; i < res.data.length; i++) {
   
//根据是否文件夹拼接数组：目的文件夹排在上面；文件排在下面（美观）；没有这个需求可以不分开拼接，直接push
                                            if (res.data[i].dir) {
   
                                                arr1.push({
   
                                                    'name': res.data[i].fileName,//文件名
                                                    'label': res.data[i].fileName,//文件名
                                                    'id': res.data[i].pathName,
                                                    'pathName': res.data[i].pathName,//路径
                                                    // 'level': 0,//等级
                                                    'dir': res.data[i].dir,//是否目录