el-tree可拖拽树的搜索功能

搜索效果图：

代码：

<el-aside width="305px">
          <div class="asideContent">
            <el-input
              type="text"
              v-model="filterText"
              placeholder="搜索区域名称"
              clearable
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="filterTree(filterText)"
              ></i>
            </el-input>
            <div class="fq-tree">
              <el-tree
                ref="tree"
                :data="data"
                node-key="id"
                default-expand-all
                @node-drop="handleDrop"
                draggable
                :props="defaultProps"
                :allow-drop="allowDrop"
                :allow-drag="allowDrag"
                @node-click="nodeClick"
                :filter-node-method="filterNode"
                :highlight-current="curentCheck"
                :expand-on-click-node="false"
              >
              </el-tree>
            </div>
          </div>
        </el-aside>


//data中：
data() {
    return {
      filterText: "",
      data: [],
      defaultProps: {
        id: "id",
        children: "children",
        label: "name",
      },
    }
}


//methods中

   // 搜索事件
    filterTree(val) {
      this.$refs.tree.filter(val);
    },
    // 树节点点击事件
    nodeClick(data, node, element) {
    
    },
    // 模糊查询
    filterNode(value, data) {
      if (!value) return true;
      let filterRes = data.name.indexOf(value) !== -1;
      return filterRes;
    },
    //可拖拽树拖拽后在此事件中调用接口
        handleDrop(draggingNode, dropNode, dropType, ev) {
      let params = {
        name: draggingNode.data.name,
        uuid: draggingNode.data.uuid,
        parentUuid: dropNode.data.uuid,
        sort: draggingNode.data.sort,
      };
      axios({
        method: "post",
        url: "/api/xxxxxxxxxxxxxxxxxx",
        data: params,
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
        } else {
          return this.$message.info(res, data.msg);
        }
      });
    },
    //是否允许拖拽
    allowDrop(draggingNode, dropNode, type) {
      return true;
    },
    allowDrag(draggingNode) {
      return true;
    },


//style中的样式
.fq-tree {
  .el-tree-node:focus > .el-tree-node__content {
    color: #cecece;
  }
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    // 设置颜色
    background-color: #0f428f;
  }
}