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

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

posted @ 2021-03-26 11:24  lpmou  阅读(1030)  评论(0编辑  收藏  举报
返回顶部