Element-ui树形控件el-tree增删改和局部刷新及懒加载

需求： vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。

增加节点，点击确定后局部刷新，渲染新数据。

源码

element组件样式

			<el-tree 
                class="treeitems"
                :data="data"
                node-key="id"
                :props="defaultProps" 
                :load="loadNode"
                lazy
                :default-expanded-keys="[0]"
                @node-click="handleNodeClick"
                draggable
                :allow-drop="allowDrop"
                :allow-drag="allowDrag"
                 @node-drop="handleDrop"
                ref="tree"
            >
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                    <i @click="() => append(node,data)" class="el-icon-plus"></i><!--增加分组-->
                    <!-- 根节点不需要删除和重命名 -->
                    <i v-if="data.id !== 0" @click="() => deletes(node,data)" class="el-icon-delete"></i><!--删除分组-->
                    <i v-if="data.id !== 0" @click="() => rename(node,data)" class="el-icon-edit"></i><!--重命名分组-->
                </span>
            </span>
         </el-tree>

data数据

data() {
      return {
        filterText: '',
        data: [{
            id:0,
            label: '中国',
            
        }],
        children: [{
                id:1,
                label: '北京',
                children: [{
                    id:11,
                    label: '通州'
                }]
            },
            {   
                id:2,
                label: '上海',
                leaf: true,
            },
            {   
                id:3,
                label: '山西',
                children:[{
                    id: 13,
                    label: '太原'
                },{
                    id: 14,
                    label: '阳泉'
                }]
            },{
                id:4,
                label: '黑龙江',
                children: [{
                    id:12,
                    label: '哈尔滨'
                }]
            }],
        defaultProps: {
          children: 'children',
          label: 'label',
          isLeaf: 'leaf'
        }
      };

点击增加节点弹出弹窗
这里也用的是element的弹窗，直接在methods里写：

		//点重命名事件
		append(node,data) {
           console.log(node,data,'增加')
           this.$prompt('节点名字', '增加节点', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^[\u4e00-\u9fa5]{0,}$/,//匹配全中文
                inputErrorMessage: '请输入中文'//不符合正则匹配的提示语句
                }).then(({ value }) => {
                    //可以在这里发请求，http是我模拟的一个虚假的封装好的axios请求,()可写请求参数
                    http().then((data)=>{
                        this.$message({
                            type: 'success',
                            message: '修改成功'
                        });  
                        //请求成功需局部刷新该节点，调用方法,把节点信息node传入
                        this.partialRefresh(node)
                    })
                    //请求失败
                    .catch(()=>{
                        this.$message({
                            type: 'info',
                            message: '修改失败'
                        });  
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消修改'
                    });       
            });
        },
        //实现局部刷新，在点击弹窗处调用的
        partialRefreshpartialRefresh(node){
            //设置loaded为false；模拟一次节点展开事件，加载重命名后的新数据；
            node.loaded = false;
            node.expand(); 
            //新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的的展开事件，
            //可以设置node.parent.loaded = false;node.parent.expand();
        },

懒加载

该处可直接设置有无节点，如果后端返回有无节点的表示就可用，若无可舍弃。（data中写，我在本地模拟数据上海字段中加了leaf: true,上海节点就默认没有节点了）

		//懒加载
        loadNode(node, resolve){
            if (node.level === 0) {
                //本地的数据，一个承载中国字样的数组；
                return resolve(this.data);
            }
            else if(node.level === 1){
                //现在为模拟数据；
                //有真实数据，在resolve中放置请求回来的数据即可。
                //else同样也是。我这里是区分了两种请求方式。
                return resolve(this.children)
            }
            else{
                return resolve([])
            }
        },

拖拽节点

		 //拖拽==>拖拽时判定目标节点能否被放置
        allowDrop(draggingNode, dropNode, type){
            //参数：被拖拽节点，要拖拽到的位置
            //因为根目录是我本地写死的，不能有同级，所以我设置凡是拖拽到的level===1都存放到根节点的下面；
            if(dropNode.level===1){
                return type == 'inner';
            }
            else {
                return true;
            }
        },
        //拖拽==>判断节点能否被拖拽
        allowDrag(draggingNode){
	        //第一级节点不允许拖拽
            return draggingNode.level !== 1;
        },

需求改了，同级节点拖拽，拖拽完成后将排序结果返回后端：

//拖拽==>拖拽时判定目标节点能否被放置
        //后更改为只能同级拖拽
        allowDrop(draggingNode, dropNode, type) {
            if (draggingNode.level === dropNode.level) {
                if (draggingNode.data.parentId === dropNode.data.parentId) {
                    return type === 'prev' || type === 'next'
                }
            } else {
                // 不同级不允许拖拽
                return false
            }
        },
        //拖拽==>判断节点能否被拖拽
        allowDrag(draggingNode) {
            return draggingNode.level !== 1;
        },
        //拖拽成功完成时触发的事件，在这里可以将节点拖拽后的顺序返给后端
        handleDrop(node,data,type,event){
            let arr=[];
            //data为拖拽后节点信息，找到它的父级，在从父级找子集
            let child = data.parent.childNodes;
            for(var key in child){
                arr.push({id:child[key].data.id})
            }
            //转为JSON字符串发请求带走信息
            idSort(JSON.stringify(arr))

        }