element ui Tree搜索显示节点和所有子节点

element ui 手册提供的方法：

//<el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>

<el-tree
  class="filter-tree"
  :data="data2"
  :props="defaultProps"
  default-expand-all
  :filter-node-method="filterNode"
  ref="tree2">
</el-tree>

<script>
  export default {
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val);
      }
    },

    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },

    data() {
      return {
        filterText: '',
        data2: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

但是这里只能展开到数据搜索的当前节点，所以自己无法显示，实际使用中我们搜索父节点，需要去展开选择子节点，官放提供的方法无法解决；

这里的关键在于filterNode（value,data,node），函数有3个参数，详情看API，对官方提供的方法稍加改良即可。

// filterNode(value,data,node) {
	//如果共有四级菜单
	if (!value) return true
	let one = data.label.indexOf(value) !== -1
	let two = node.parent && node.parent.data && node.parent.data.label && (node.parent.data.label.indexOf(value) !== -1)
	let three = node.parent && node.parent.parent && node.parent.parent.data && node.parent.parent.data.label && (node.parent.parent.data.label.indexOf(value) !== -1)
	let four= node.parent && node.parent.parent && node.parent.parent.parent && node.parent.parent.parent.data && node.parent.parent.parent.data.label && (node.parent.parent.parent.data.label.indexOf(value) !== -1)
	let result_one = false
	let result_two = false
	let result_three = false
	let result_four = false
	if(node.level === 1) {
		result_one = one
	}else if(node.level === 2) {
		result_two = one || two
	}else if(node.level === 3) {
		result_three = one || two || three
	}else if(node.level === 4) {
		result_three = one || two || three || four
	}
    return result_one || result_two || result_three || result_four
}

这里展示是四级的结构，如果结构层数不同，根据方法进行适当的增删