el-tree懒加载,并加入搜索功能（后台搜）

完整页面代码

<template>
  <div style="width:100%;">
    <div class="company"></div>
    <div style="position:relative">
      <el-input @keyup.enter.native="submit" placeholder="请输入关键词" v-model="filterText"></el-input>
      <div class="search-icon">
        <img width="100%" height="100%" @click="search" src="@/assets/img/搜索.png" alt />
      </div>
    </div>
    <!-- default-expand-all设置默认全部展开设置缩进 -->
    <el-tree
      class="filter-tree"
      :props="defaultProps"
      accordion
      :load="loadNode"
      :data="treedata"
      lazy
      :indent="0"
      :check-on-click-node="true"
      @check="setSelectedNode"
      :filter-node-method="filterNode"
      ref="tree"
    >
      <!-- <span class="slot-t-node" slot-scope="{node,data}">
    <i :class="{'fa fa-folder':!node.expanded,'fa fa-folder-open':node.expanded,'fa fa-file':node.isLeaf}" style="color:#333" />
    <span style="color:red;font-weight:600" v-show="data.existFD==0&&node.isLeaf">{{node.label}}</span>
    <span v-show="data.existFD!=0">{{node.label}} </span>
      </span>-->
    </el-tree>
    <!-- <div class="buttons">
  <el-button @click="getCheckedNodes">通过 node 获取</el-button>
  <el-button @click="getCheckedKeys">通过 key 获取</el-button>
  <el-button @click="setCheckedNodes">通过 node 设置</el-button>
  <el-button @click="setCheckedKeys">通过 key 设置</el-button>
  <el-button @click="resetChecked">清空</el-button>
    </div>-->
  </div>
</template>
<script>
import { path } from "../../router/path";
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import { searchPvtree, SEARCH } from "../../axios/dataCheck";
export default {
  props: {},
  data() {
    return {
      isthis: 0, //标识判断是哪种树
      //tab页面导航路由
      router: [],
      filterText: "",
      treedata: [],
      oid: "", //中转oid,真正的oid存于模块a中
      label: "",
      node: "",
      resolve: "",
      checktype: "",
      documentid: "", //中转documentid,真正的存于模块a中
      historyid: "", //中转historyDocumentid,真正的存于模块a中
      defaultProps: {
        children: "children",
        label: "LABEL"
        // label: 'label'
      }
    };
  },
  beforeCreate() {},
  created() {
    //   path[0].children[0].children[1].children.forEach(item=>{
    //   //设置左侧导航对应的路由
    //    this.router.push({path:path[0].path+'/'+path[0].children[0].path+'/'+path[0].children[0].children[1].path+'/'+item.path})
    // }),
    // path[0].children[0].children[1].children[2].children.forEach(item1=>{
    //   this.router.push({path:path[0].path+'/'+path[0].children[0].path+'/'+path[0].children[0].children[1].path+'/'+path[0].children[0].children[1].children[2].path+'/'+item1.path})
    // })
  },
  mounted() {
    // searchPvtree().then(res=>{
    //   console.log(res.data.data)
    //   this.data=res.data.data
    //   console.log(this.data)

    // })
    //每次tree组件渲染清空参数。
    this.setDkxoid("");
    this.setLabel("");
    this.setchecktype("");
  },
  computed: {},
  watch: {
    gettreeData(val) {}
    //设置输入框输入时自动过滤，无需点击搜索按钮
    // filterText(val) {
    //   this.$refs.tree.filter(val);
    // }
  },
  methods: {
    ...mapActions("a", ["setDkxoid", "setLabel", "setchecktype"]),
    //查询树通用方法，通过isthis标识符判断哪种调用
    commonSearch() {
      if (!this.filterText) {
        this.isthis = 0;
        this.treedata = [];
        searchPvtree({ level: "0" })
          .then(res => {
            console.log(res.data.success);
            if (res.data.success) {
              this.treedata = res.data.data;
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch(() => {
            let data = [];
            return resolve(data);
          });
      } else {
        this.isthis = 1;
        this.treedata = [];
        SEARCH({ searchName: this.filterText }).then(res => {
          console.log(res);
          this.treedata = res.data.data;
        });
      }
    },
    //查询
    search() {
      this.commonSearch();
    },
    //enter
    submit() {
      this.commonSearch();
    },

    commonSearchT(val, resolve) {
      // 查找顶级对象
      searchPvtree(val)
        .then(res => {
          if (res.data.success) {
            return resolve(res.data.data);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(() => {
          console.log("错误");
          let data = [];
          return resolve(data);
        });
    },
    // 加载树结点
    loadNode(node, resolve) {
      // isthis为0则调取全searchPvtree
      if (this.isthis == 0) {
        // 如果是顶级的父节点
        if (node.level === 0) {
          let paraobj = { level: "0" };
          this.commonSearchT(paraobj, resolve);
        } else {
          if (node.data.PARENTID) {
            let paraobj = {
              oid: node.data.OID.toString(),
              level: node.level.toString(),
              parentId: node.data.PARENTID
            };
            this.commonSearchT(paraobj, resolve);
          }
          else{
          // 根据父节点id找寻下一级的所有节点
          let paraobj = {
            oid: node.data.OID.toString(),
            level: node.level.toString()
          };
          this.commonSearchT(paraobj, resolve);
          }
        }
      } else {
        // isthis为1则不调取
        let data = [];
        return resolve(data);
      }
    },
    //实现单选
    setSelectedNode(data, obj) {
    

**//如果要控制单选，必须指定nodekey， //this.$refs.tree.setCheckedKeys([data]);**

      console.log(data.LABEL, data);
      var that = this;
      //最下一级有字段ISLEAF
      //加一层判断必须要有checktype才允许校验
      if (data.CHECKTYPE) {
        console.log(99);
        this.oid = data.OID; //用于搜索部门列表
        this.label = data.LABEL;
        this.checktype = data.CHECKTYPE;
        this.setDkxoid(this.oid); //设置修改大块线oid,只有当他不为空是才赋值发生值改变
        this.setLabel(this.label);
        this.setchecktype(this.checktype);
      } else {
        this.setchecktype("");
        this.setDkxoid(""); //设置修改大块线oid,只有当他不为空是才赋值发生值改变
      }
    },
    //树的获取设置操作
    getCheckedNodes() {
      // console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      // console.log(this.$refs.tree.getCheckedKeys());
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([
        {
          id: 5,
          label: "二级 2-1"
        },
        {
          id: 8,
          label: "二级 3-2"
        }
      ]);
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([13]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    //数内容筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.LABEL.indexOf(value) !== -1;
    }
  }
};
</script>
<style lang="scss">
//设置搜索按钮
.search {
  display: inline-block;
  margin-left: 0.2rem;
  padding: 0.03rem 0.15rem;
  background: rgb(0, 112, 107);
  font-size: 0.14rem;
  color: white;
  border-radius: 0.04rem;
  cursor: pointer;
}
//设置搜索图标
.search-icon {
  position: absolute;
  left: 55%;
  top: 0.05rem;
  width: 0.12rem;
  height: 0.12rem;
}
.search-icon img {
  width: 0.12rem;
  height: 0.12rem;
}
//设置搜索框
.main_tree .el-input {
  outline: none;
  width: 60%;
  margin-left: 0.08rem;
  .el-input__inner {
    outline: none;
    display: inline-block;
    width: 100%;
    height: 0.3rem !important;
    line-height: 0.3rem !important;
    font-size: 0.1rem;
    text-indent: 0.01rem;
    border-radius: 0.15rem;
  }
}
//设置公司名称
.company {
  text-indent: 0.08rem;
  font-size: 0.16rem;
  color: #333333;
  font-weight: 800;
  margin-bottom: 0.1rem;
}
//修改Tree样式
.el-tree-node {
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  //设置叶子节点显示checkbox，设置checkbox与文字的间距
  .is-leaf + .el-checkbox .el-checkbox__inner {
    display: inline-block;
    margin: 0 0.05rem;
  } //设置其他节点不显示checkbox
  .el-checkbox .el-checkbox__inner {
    display: none;
  }
  //设置tree文字的大小
  .el-tree-node__label {
    font-size: 0.14rem;
    font-weight: 600;
  }
}
// 设置虚线
.el-tree-node {
  position: relative;
  padding-left: 0.04rem !important;
  margin-bottom: 0.02rem;
}
.el-tree-node__children {
  padding-left: 0.35rem;
}
.el-tree-node :last-child:before {
  height: 0.38rem;
}
.el-tree > .el-tree-node:before {
  border-left: none;
}
.el-tree > .el-tree-node:after {
  border-top: none;
}
.el-tree-node:before,
.el-tree-node:after {
  content: "";
  left: -0.22rem;
  position: absolute;
  right: auto;
  border-width: 0.01rem;
}
.tree :first-child .el-tree-node:before {
  border-left: none;
}
//--start
// //竖直的虚线
.el-tree-node:before {
  border-left: 0.01rem dashed rgb(191, 191, 191);
  bottom: 0.01rem;
  height: 100%;
  top: -0.27rem;
  width: 0.01rem;
}
//水平的虚线
.el-tree-node:after {
  border-top: 0.01rem dashed rgb(191, 191, 191);
  height: 0.2rem;
  top: 0.13rem;
  width: 0.22rem;
}
//修改展开图标
.el-tree .el-icon-caret-right:before {
  background: url("../../assets/img/展开.png") no-repeat 0 0.01rem;
  content: "";
  display: block;
  width: 0.14rem;
  height: 0.14rem;
  font-size: 0.14rem;
  background-size: 0.14rem;
}
//修改收起图标
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("../../assets/img/收起.png") no-repeat -0.01rem 0;
  content: "";
  display: block;
  width: 0.14rem;
  height: 0.14rem;
  font-size: 0.14rem;
  background-size: 0.16rem;
} //修改原本点击展开或收起图标会旋转的样式
.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
//-end

.slot-t-node span {
  color: #333;
  font-size: 0.14rem;
  font-family: "Microsoft YaHei" !important;
}
.el-tree-node__expand-icon {
  color: #333 !important;
  font-size: 0.21rem !important;
}

.el-tree-node__content > .el-tree-node__expand-icon {
  padding: 0.06rem !important;
}
//设置对齐图标
.fa {
  padding-left: 0.03rem !important;
}
</style>