解决element ui树形控件自带的搜索方法无法展开下级问题

在下面内容中绑定filter自带的搜索筛选事件 :filter-node-method='事件名'

<template>

<el-tree

icon-class

:data="Tree"

:show-checkbox="true"

node-key="PathId"

ref="tree"

:props="defaultProps"

:filter-node-method="事件名"

:expand-on-click-node="true"

>

//input框与搜索按钮   @keyup.enter.native='searchTree' 是一个回车事件 触发搜索按钮

 <el-input

          placeholder="请输入关键字"

          v-model="filterText"

          clearable

          @keyup.enter.native="searchTree"

        >

        </el-input>

        <el-button type="primary" style="margin-left: 20px" @click="searchTree">搜索</el-button>

</template>

给搜索框 双向绑定一个值

<script>

export defalt{

//监听input的值

watch: {

    filterText(val) {

      if (val.length == 0) {

        this.searchTree();

      }

    },

  },

data(){

return{

fitlerText:''  //搜索框的v-model

}

}

methods方法中

methods:{

//searchTree是搜索按钮，树形控件自带的搜索筛选方法是一个输入事件，所以我这里把输入事件换成了点击事件，点击按钮才会触发搜索筛选满足条件的数据

    searchTree() {

      this.$refs.tree.filter(this.filterText);

    },

    事件名(value, data, node) {

      if (!value) {

        //如果数据为空，则返回true,显示所有的数据项

        node.expanded = false;

        return true;

      } // 查询列表是否有匹配数据

      let val = value.toLowerCase();

      return this.chooseNode(val, data, node); // 调用过滤二层方法  最重要的一个方法 如果运行不了  基本是这个chooseNode方法有出问题 可以仔细

    },

chooseNode中的label是element ui中树形控件的数据结构 如果后端返回的字段不是label  可自行进行更改

    chooseNode(value, data, node) {

      if (data.label.indexOf(value) !== -1) {

        return true;

      }

      const level = node.level;

      // 如果传入的节点本身就是一级节点就不用校验了

      if (level === 1) {

        return false;

      }

      // 先取当前节点的父节点

      let parentData = node.parent;

      // 遍历当前节点的父节点

      let index = 0;

      while (index < level - 1) {

        // 如果匹配到直接返回

        if (parentData.data.label.indexOf(value) !== -1) {

          return true;

        }

        // 否则的话再往上一层做匹配

        parentData = parentData.parent;

        index++;

      }

      // 没匹配到返回false

      return false;

    },

}

}

</script>

到这里基本就能解决element ui树形控件自带的搜索方法无法展开下级问题