封装element树状图输入框

效果如下（输入框包裹树状图，输入框失去焦点或者选中树状图的数据，树状图就消失）

<template>
  <el-form-item :label="name">
    <el-popover
      v-model="menuListVisible"
      ref="menuListPopover"
      placement="bottom-start"
      trigger="click"
    >
      <el-tree
        :data="tree"
        :props="{ label: 'name', children: 'children' }"
        node-key="id"
        ref="filter"
        :highlight-current="true"
        :expand-on-click-node="false"
        accordion
        :filter-node-method="filterNode"
        @current-change="menuListTreeCurrentChangeHandle"
      >
      </el-tree>
    </el-popover>
    <el-input
      v-model="filterText"
      v-popover:menuListPopover
      :readonly="false"
      @blur="leave"
      :placeholder="placeholder"
      clearable
    >
    </el-input>
  </el-form-item>
</template>
<script>
//下面的需求自己修改，我这边展示的是我需要的
import {
  iconTree,
  getModelTree,
  getVideoTree,
  getFolderTree,
} from "@/api/common/api";

export default {
  data() {
    return {
      name: this.treeName.name,
      menuListVisible: false,
      noResultsText: "未查询到此" + this.treeName.name,
      placeholder: "请选择" + this.treeName.name,
      filterText: this.treeName.inputName,
      filterId: null,
      tree: [],
    };
  },
  props: {
    treeName: { type: Object, default() {} },
  },
  methods: {
    // 失去焦点
    leave(e) {
      if (this.treeName.type == "folderTree") {
        this.$emit("receive", {
          name: this.filterText,
        });
      }
    },
    // 选中当前节点
    menuListTreeCurrentChangeHandle(value) {
      if (value.type !== 0) {
        if (value.filePath) {
          this.filterText = value.filePath;
        } else {
          this.filterText = value.name;
        }
        this.menuListVisible = false;
        // 发送给父组件
        this.$emit("receive", {
          id: value.id,
          name: this.filterText,
          url: value.url ? value.url : "",
        });
      } else {
        return;
      }
    },
    // 节点过滤，搜索
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
  },
  // watch是监听的意思，数据变化就会更新。n是新数据，o是老数据
  watch: {
    treeName: (n, o) => {
      this.treeName = n;
    },
    filterText(val) {
      this.$refs.filter.filter(val);
    },
  },
  mounted: function () {
    switch (this.treeName.type) {
      case "iconTree":
        iconTree().then((res) => {
          if (res.code == 0) {
            this.tree = res.data;
            setTimeout(() => {
              this.filterText = this.treeName.inputName;
            }, 200);
          }
        });
        break;
      case "projectTree":
        iconTree().then((res) => {
          if (res.code == 0) {
            this.tree = res.data;
            //console.log(this.treeName)
            setTimeout(() => {
              this.filterText = this.treeName.inputName;
            }, 200);
          }
        });
        break;
      case "modelTree":
        getModelTree().then((res) => {
          if (res.code == 0) {
            this.tree = res.data;
            //console.log(this.tree);
            setTimeout(() => {
              this.filterText = this.treeName.inputName;
            }, 200);
          }
        });
        break;
      case "videoTree":
        getVideoTree().then((res) => {
          if (res.code == 0) {
            this.tree = res.data;
            setTimeout(() => {
              this.filterText = this.treeName.inputName;
            }, 200);
          }
        });
        break;
      case "folderTree":
        getFolderTree().then((res) => {
          if (res.code == 0) {
            this.tree = res.data;
            setTimeout(() => {
              this.filterText = this.treeName.inputName;
            }, 200);
          }
        });
        break;
      default:
        this.tree = [];
    }
  },
};
</script>
<style lang="scss">
.el-popover {
  .el-tree {
    background: #000;
    color: #fff;
    border: 1px solid rgb(150, 144, 144);
    border-radius: 5px;
    padding-right: 15px;
    padding-bottom: 10px;
  }
}
</style>

使用，导入

import inputTree from "@/components/common/inputTree";

注册组件

components: { inputTree },

使用组件

  <inputTree
    :treeName="childVideoTree"
    @receive="videoReceive"
  ></inputTree>

传递参数，根据自己的需求传参

 childVideoTree: {
        name: "视频",
        type: "videoTree",
        treeId: null,
        inputName: "",
      },

父组件接收方法

videoReceive(data) {
  this.formData.videoBaseId = data.id;
  this.formData.videoBaseName = data.id;
},