(Elementui) el-tree 中英文过滤以及搜索到父子显示子节点，搜索到子节点显示父节点(filter-node-method)

前言：这是我在项目中遇到的问题，然后在百度查到的，做个总结收藏。

在项目中，会遇到树节点的搜索，中文和英文搜索，以及搜索到父节点匹配的时候同步显示该父节点下所有的子节点，搜索到子节点匹配的时候同步显示该子节点的父节点。话不多说，以下是代码：

首先是组件部分:

<template>
<el-popover placement="bottom-start" trigger="click" style="width:100%;" v-model="cdListVisible">
　　<el-tree :data="cdList" :props="{ label: 'name', children: 'children' }"
　　　　node-key="id" ref="cdListTree"
　　　　:filter-node-method="filterNodeTree"
　　　　@current-change="currentHandle">
　　</el-tree>
　　<template>
　　　　<el-input slot="reference" v-model="dataForm.parentName" @input="filterInput" placeholder="设备树"></el-input>
　　</template>
</el-popover>
</template>
:data="cdList"是请求回来的树数据
:filter-node-method="filterNodeTree" 自定义过滤方法（重点）
@current-change="currentHandle" 当前树节点选中事件（可忽略，做赋值操作）
@input="filterInput" 输入信息触发过滤事件（重要）

接下来是事件部分：

//调用el-tree的filter方法，触发条件过滤，并将当前输入的信息传递到事件内部.
filterInput () {　　
　　this.$refs.cdListTree.filter(this.dataForm.parentName)
},


// 调用tree过滤方法 中文英过滤
filterNodeTree (value, data, node) {
　　if (!value) {　　　　//如果数据为空，则返回true,显示所有的数据项
　　　　node.expanded = false
　　　　return true
　　}
　　// 查询列表是否有匹配数据，将值小写，匹配英文数据
　　let val = value.toLowerCase()
　　return this.chooseNode(val, data, node) // 调用过滤二层方法
},


 // 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
　　chooseNode (value, data, node) {
　　　　if (data.name.indexOf(value) !== -1 || data.enName.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) {
        // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
        if (parentData.data.name.indexOf(value) !== -1 || parentData.data.enName.indexOf(value) !== -1) {
          return true
        }
        // 否则的话再往上一层做匹配
        parentData = parentData.parent
        index++
      }
      // 没匹配到返回false
      return false
    },

最后，数据格式：以下是模拟数据

let city = [
　　　　{ name: '北京', enName: 'bj', children: [ { name: '朝阳区', enName: 'cyq' }, { name: '大兴区', enName: 'dxq' }, { name: '昌平区', enName: 'cpq' } ] },
　　　　{ name: '天津', enName: 'tj', children: [ { name: '南开区', enName: 'nkq' }, { name: '和平区', enName: 'hpq' }, { name: '西青区', enName: 'xqq' } ] }
　　]
　this.cdList = city

看结果：

获取焦点之后，显示所有的数据