el-tree封装。可以搜索/下拉/高亮/能操作增删改查

项目场景：

      el-tree树形图组写成一个组件，并控制默认高亮

---

问题描述

      el-tree树形图组写成一个组件，并控制默认高亮。上边存在搜索框和下拉框。能添加和删除

---

解决方案：

组件代码：

<template>
  <div class="grid-content bg-purple">
  <!-- 标题 -->
    <div class="tab">{{ title }}</div>
    <!-- input输入框 -->
    <div v-if="showInput">
      <el-input
        style="width: 85%; margin-right: 15px"
        v-model="resource"
        size="small"
        placeholder="搜索"
        prefix-icon="el-icon-search"
      ></el-input>
      <el-link :underline="false"
        ><i
          v-if="!isMysql"
          class="el-icon-folder-add"
          style="font-size: 18px"
          @click="addTree"
        ></i>
        <el-popover
          popper-class="popoverStyle"
          placement="right"
          width="100"
          trigger="hover"
          v-else
        >
          <div>
            <p
              class="mysqlP"
              v-for="item in dict.type.dap_datasource_class"
              :key="item.code"
              @click="addTreeMysql(item.value)"
            >
              {{ item.label }}
            </p>
          </div>
          <i
            slot="reference"
            class="el-icon-folder-add"
            style="font-size: 18px"
          ></i>
        </el-popover>
      </el-link>
    </div>
    <!-- select 下拉框 -->
    <div v-if="showSelect">
      <el-select
        style="width: 60% !important; margin-right: 15px"
        v-model="selectVal"
        size="small"
        placeholder="请选择"
        @change="getChange"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-link :underline="false"
        ><i
          class="el-icon-folder-add"
          style="font-size: 18px"
          @click="addTree"
        ></i>
      </el-link>
    </div>
    <!-- el-tree 树形图 -->
    <div :class="type == 1 ? 'treeBottom' : 'treeBottom2'">
      <el-tree
        :data="deptOptions"
        :props="props"
        node-key="id"
        :default-expanded-keys="defaultExpandedKeys"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        :current-node-key="highlightKey"
        highlight-current
        accordion
        ref="testTree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">   
        <!-- 每个节点的图标 -->
          <div >
            <span>
              <i
                v-if="Array.isArray(data.children) && data.children.length > 0"
                style="margin-right: 10px"
                class="el-icon-folder"
              ></i>
              <i v-else style="margin-right: 10px" class="el-icon-tickets"></i>
              {{ node.label }}</span
            >
          </div>
          <!-- 更多操作 -->
          <div
            v-if="showMore"
            class="tree_div"
            :class="
              checkId == data.id || checkId == data.value ? 'tree_checked' : ''
            "
          >
            <el-dropdown
              v-if="node.label != '任务分类' || node.label != '资源目录'"
            >
              <img src="@/assets/image/more.png" alt="" />
              <el-dropdown-menu
                slot="dropdown"
                style="padding: 0 10px; color: #606266"
              >
                <div class="menu">
                  <div
                    v-if="isView"
                    class="caid"
                    style="font-size: 14px"
                    @click="viewTree(node)"
                  >
                    <i style="margin-right: 10px" class="el-icon-view"></i>查看
                  </div>
                  <div
                    v-if="isResource"
                    class="caid"
                    style="font-size: 14px"
                    @click="resTree(node)"
                  >
                    <i
                      style="margin-right: 10px"
                      class="el-icon-s-management"
                    ></i
                    >资源
                  </div>
                  <div
                    class="caid"
                    style="font-size: 14px"
                    @click="editTree(node)"
                  >
                    <i style="margin-right: 10px" class="el-icon-edit"></i>编辑
                  </div>
                  <div
                    v-if="isSubordinate"
                    class="caid"
                    style="font-size: 14px"
                    @click="subordinate(node)"
                  >
                    <i style="margin-right: 10px" class="el-icon-folder-add"></i
                    >下级
                  </div>
                  <div
                    class="caid"
                    style="font-size: 14px; color: red"
                    @click="delTree(node)"
                  >
                    <i style="margin-right: 10px" class="el-icon-delete"></i
                    >删除
                  </div>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "1",
    },
    /* 搜索框显示 */
    showInput: {
      type: Boolean,
      default: true,
    },
    /* 下拉框 */
    showSelect: {
      type: Boolean,
      default: false,
    },
    /* 下拉框值 */
    resourceSelect: {
      type: String,
    },
    /* 下拉框选项的值 */
    options: {
      type: Array,
    },
    checkId: {
      type: String,
      default: "",
    },
    /* 树形图data */
    deptOptions: {
      type: Array,
      default: [],
    },
    /* 默认展开节点的值 */
    defaultExpandedKeys: {
      type: Array,
    },
    /* tree型子级的格式 */
    props: {
      type: Object,
    },
    /* 显示增删改操作  */
    showMore: {
      type: Boolean,
      default: true,
    },
    /* 下级跟添加切换 */
    isSubordinate: {
      type: Boolean,
      default: true,
    },
    /* 查看 */
    isView: {
      type: Boolean,
      default: false,
    },
    /* 资源按钮 */
    isResource: {
      type: Boolean,
      default: false,
    },
    /* 默认高亮 */
    highlightKey: {
      type: [String, Number],
      default: "",
    },
    /* 数据库新增 */
    isMysql: {
      type: Boolean,
      default: false,
    },
    /* 数据库 图标显示 */
    isMysqlIcon: {
      type: Boolean,
      default: false,
    },
  },
  dicts: ["dap_datasource_class"],
  data() {
    return {
      resource: "",
      selectVal: this.resourceSelect,
    };
  },
  watch: {
    // 根据目录查找数据
    resource(val) {
      this.$refs.testTree.filter(val);
    },
    // 高亮操作
    highlightKey(val) {
      this.$nextTick(() => {
        this.$refs["testTree"].setCurrentKey(val);
      });
    },
  },
  methods: {
  // 节点筛选
    filterNode(value, data) {
      if (!value) return true;
      var res = "";
      if (data.name) {
        res = data.name.indexOf(value) !== -1;
        return res;
      }
      // console.log("data.label",data.label);
      if (data.label) {
        res = data.label.indexOf(value) !== -1;
        return res;
      }
    },
    // 下拉框改变值
    getChange(id) {
      this.$emit("selectChange", id);
    },
    // 新增
    addTree() {
      this.$emit("addTree");
    },
    
    // 资源
    resTree(data) {
      this.$emit("resTree", data);
    },
    
    // 节点点击
    handleNodeClick(data, node, component) {
      this.$emit("nodeClick", data, node, component);
    },
    
    // 修改 
    editTree(data) {
      this.$emit("editTree", data);
    },
    
    // 下级
    subordinate(data) {
      this.$emit("subordinate", data);
    },
    
    // 删除
    delTree(data) {
      this.$emit("delTree", data);
    },
    
    // 查看
    viewTree(data) {
      this.$emit("viewTree", data);
    },
    /* 数据源添加 */
    addTreeMysql(val) {
      this.$emit("mysqlVal", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.treeBottom {
  margin-top: 15px;
  height: calc(100vh - 220px);
  overflow: hidden;
  overflow-y: auto;
  font-size: 14px;
}
.treeBottom2 {
  margin-top: 15px;
  height: calc(100vh - 250px);
  overflow: hidden;
  overflow-y: auto;
  font-size: 14px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node {
  &:hover .tree_div {
    display: block;
  }
}

.tree_div {
  width: 10px;
  display: none;
  img {
    height: 12px;
  }
}
.tree_checked {
  display: block;
}
.caid {
  text-align: center;
  height: 20px;
  line-height: 20px;
  margin: 10px 5px;
  cursor: pointer;
  &:hover {
    background-color: #edf6ff;
  }
}
::v-deep #el-popover {
  min-width: 80px !important;
}
.mysqlP {
  cursor: pointer;
  margin: 0px;
  padding: 5px;
  &:hover {
    background-color: #edf6ff;
  }
}
</style>
 <style lang="scss">
.el-popover.popoverStyle {
  height: 158px;
  overflow: auto;
}
.tab {
  font-size: 16px;
  padding-bottom: 10px;
  font-weight: 800;
}
</style>

引用代码：
我在main.js里面引用全局。
根据自己需求，显示想要的条件

<tree-value
            ref="treeValue"
            :deptOptions="deptOptions"
            :props="props"
            :showInput="true"
            :showSelect="false"
            :isSubordinate="false"
            :highlightKey="highlightKey"
            type="2"
            @nodeClick="handleNodeClick"
            @addTree="addTree"
            @delTree="delTree"
            @editTree="editTree"
          ></tree-value>