Element-UI el-tree功能应用

1.目录节点搜索功能：

	<el-tree>
		:filter-node-method="filterNode"
	</el-tree>
	//添加监听
	watch: {
        search(val) {
            this.$refs.tree.filter(val)
        }
    },
    // 树搜索
    filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
    },

2.目录节点点击事件：

	<el-tree>
		@node-click="handleNodeClick"
	</el-tree>
	// 目录节点点击
    handleNodeClick(e, node) {
        
    },

3.目录刷新保持当前结构不变：

	<el-tree>
        @node-expand="handleNodeExpand"
        @node-collapse="handleNodeCollapse"
	</el-tree>
	// 树节点展开
       handleNodeExpand(data) {
           // 保存当前展开的节点
           let flag = false
           this.defaultExpandIds.some(item => {
               if (item === data.id) {
                   flag = true
                   return true
               }
           })
           if (!flag) {
               this.defaultExpandIds.push(data.id)
           }
       },
       // 树节点关闭
       handleNodeCollapse(data) {
           // 删除当前关闭的节点
           this.defaultExpandIds.some((item, i) => {
               if (item === data.id) {
                   this.defaultExpandIds.splice(i, 1)
               }
           })
           this.removeChildrenIds(data)
       },
       // 删除树子节点
       removeChildrenIds(data) {
           const ts = this
           if (data.children) {
               data.children.forEach(function(item) {
                   const index = ts.defaultExpandIds.indexOf(item.id)
                   if (index > 0) {
                       ts.defaultExpandIds.splice(index, 1)
                   }
                   ts.removeChildrenIds(item)
               })
           }
       },

4.目录节点拖拽（增加只允许在同级目录拖拽）：

	<el-tree>
        :allow-drop="allowDrop"
         @node-drop="dropSuccess"
	</el-tree>
	// 拖动改变菜单位置
    dropSuccess(node, entryNode, place, event) {
        const updateList = []
        const childList = entryNode.parent.childNodes
        childList.forEach((item, index) => {
            updateList.push({ id: item.data.id, pid: item.data.pid, sort: index + 1 })
        })
        //后台数据库接口
        updateOrders(updateList)
    },
    // 拖拽时判定目标节点能否被放置（只能同级放置）
    allowDrop(draggingNode, dropNode, type) {
        if (draggingNode.level === dropNode.level) {
            if (draggingNode.data.pid === dropNode.data.pid) {
                return type === 'prev' || type === 'next'
            } else {
                return false
            }
        } else {
            // 不同级进行处理
            return false
        }
    },

5.完整代码：

		  <div class="left">
                <div class="search">
                    <el-input v-model="search" class="search-input" placeholder="请输入关键字" />
                    <div class="ali-icon-chaxun"></div>
                </div>
                <div class="left-container">
                    <el-tree
                        ref="tree"
                        draggable
                        :default-expanded-keys="defaultExpandIds"
                        :data="menuList"
                        node-key="id"
                        highlight-current
                        :filter-node-method="filterNode"
                        :allow-drop="allowDrop"
                        @node-click="handleNodeClick"
                        @node-expand="handleNodeExpand"
                        @node-collapse="handleNodeCollapse"
                        @node-drop="dropSuccess"
                    >
                        <template #default="{ data }">
                            <span class="custom-tree-node">
                                <span v-if="data.introduce == '0'" class="ali-icon-wj-wjj" style="margin-right: 5px"></span>
                                <span v-if="data.introduce == '1'" class="ali-icon-leixing" style="margin-right: 5px"></span>
                                <span>
                                    {{ data.name }}
                                </span>
                            </span>
                        </template>
                    </el-tree>
                </div>
            </div>

<style scoped>
.left {
  width: 20%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  box-shadow: 3px 1px 4px #ccc;
}

.search {
  width: 80%;
  height: 30px;
  margin: 15px auto;
  position: relative;
}
.ali-icon-chaxun {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
::v-deep(.search-input .el-input__wrapper) {
  padding-right: 35px;
  width: 262px;
}
::v-deep(.el-input__wrapper) {
  width: 91%;
}
.left-container {
  position: absolute;
  left: 5%;
  top: 60px;
  bottom: 15px;
  width: 88%;
  overflow: auto;
}
.left-container::-webkit-scrollbar-thumb {
background: transparent;
}

::v-deep(.el-form-item__label) {
  color: #333333;
}
.left-container :deep(.el-tree) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

.left-container::-webkit-scrollbar-thumb {
background: #999999;
}
::v-deep.el-tree {
  display: inline-grid;
}
</style>