el-tree公共组件（带操作按钮）源码分享_el-tree带操作按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/sake_pipi/article/details/108905014

本文分享了一款基于Vue和ElementUI的el-tree公共组件，组件带有操作按钮，提供了详细的模板、脚本和样式代码。适用于自定义需求的父组件调用。建议复制代码后进行格式化整理，以确保正确使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍一款基于vue-elementui的tree树形公共组件

效果如下图：

提供源码：

template

<template>
  <div class="el-tree-div" :class="{'show-tree':showTree,'hide-tree':!showTree}">
    <div class="el-tree-top">
      <div class="el-tree-title">
        <span v-show="showTree">{
  
  {treeTitle}}</span>
        <el-link type="primary" :underline="false" class="inline-block refresh-tree" v-show="showTree&&refresh" @click="clickFresh">
          <svg-icon icon-class="refresh"/>刷新</el-link>
      </div>
      <svg-icon class="inline-block change-nav-i show-tree-icon" :icon-class="showTree?'put':'open'" @click.native="changeShowTree"/>
    </div>
    <div class="el-tree-content" v-show="showTree">
      <el-input placeholder="输入关键字进行过滤" v-model.trim="filterText" clearable size="small"></el-input>
      <div class="tree-body" :class="{'can-add-first-node':canAddFirstNode}">
        <el-tree
          :class="{'tree-no-data':!treeData}"
          ref="tree"
          :data="treeData"
          :show-checkbox="showCheck"
          :check-strictly="checkStrictly"
          :default-expand-all="defaultExpandAll"
          :expand-on-click-node="false"
          highlight-current
          @node-click="handleNodeClick"
          @check-change="handleCheckChange"
          node-key="id"
          :default-expanded-keys="[]"
          :default-checked-keys="[]"
          :