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

案例下载：https://gitee.com/tudoumlp/just1.git   (vue-ele-demo)

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

首先是组件部分:

<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" 输入信息触发过滤事件（重要）

接下来是事件部分：

filterInput () {
　　//调用el-tree的filter方法，触发条件过滤，并将当前输入的信息传递到事件内部.
　　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

看结果：

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

中文搜索：

英文搜索：

这就实现了，输入子节点或者父节点的名称显示相应的父节点或子节点。

以下是完整代码：

<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>

<script>
export default {
  data () {
    return {
      visible: false,
      cdList: [], // 城市菜单列表
      cdListVisible: false,
      dataForm: {
        parentName: ''
      }
    }
  },
  methods: {

    filterChange () {
　　　　//调用el-tree的filter方法，触发条件过滤，并将当前输入的信息传递到事件内部
　　　　this.$refs.cdListTree.filter(this.dataForm.parentName)
    },
    // 调用tree过滤方法 中文英过滤
    filterNode (value, data, node) {
      if (!value) {
        node.expanded = false
        return true
      }
      // 查询列表是否有匹配数据
      let val = value.toLowerCase()
      return this.chooseNode(val, data, node)
    },
    // 过滤父节点 子节点:如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。
    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
    },
　　// 点击选中
    currentHandle (selectData) {
      if (selectData.children.length === 0) {
        this.dataForm.parentName = selectData.name
        this.cdListVisible = false
      }
    }
}
</script>

至此，搜索过滤完毕，有不正之处还望指出，谢谢呀呀~~