思路
在el-tree 懒加载不兼容自带的查询,需要自己实现。
代码
<el-input clearable @keyup.native.enter="handelSearch" size="small" v-model="search"> </el-input><el-tree :data="treeDataShow" ref=“tree” node-key="id" lazy :load="loadNode" />data() {return {search:'',//搜索参数treeData:[],//总数据,由于要前端自己实现搜索,所以需要参数保存所有数据treeDataShow :[],//当时不使用懒加载时,el-tree的显示数据chooseNode: {},//当前选中节点resolve:null,//保存load的resolve方法}},mounted() {this.$nextTick(() => {//调用loadData方法展开第二层let nodedata = this.chooseNode.childNodes[0]nodedata.expanded = truenodedata.loadData()})},methods: {loadNode(node, resolve) {if(node.level===0){this.chooseNode = node//保存初始节点this.resolve =resolve//保存resolve方法}},handelSearch(){this.$refs.tree.$data.store.lazy = !this.search//根据搜索参数判断是否开启懒加载if (this.search) {//需要自己实现搜索方法 调用接口/前端js实现//处理数据将对应的树形结构数据赋值给treeDataShow } else {this.treeDataShow = []//清空原来的treeDataShow数据setTimeout(() => {//注意使用异步,否则 this.treeDataShow = [],会将你留下一行代码懒加载的数据一起清空this.loadNode(this.tree.chooseNode, this.tree.resolve)}, 50)}}}