实现效果:

初始状态:

 模糊搜索效果:

 实现方法:

template中:

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

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

对输入框的输入值设置监听:

filter对树节点进行筛选操作接收一个任意类型的参数,该参数会在 filter-node-method 中作为第一个参数
 watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }

filterNode方法为element组件中针对树形组件封装好的方法,用来实现树形组件的模糊搜索。传统的模糊搜索方法如vue纯前端实现模糊查询,使用filter和indexOf_刚刚好ā的博客-CSDN博客仅能实现最外层父节点的搜索,针对树形中子节点的搜索却不能实现。

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

这样就实现了上述效果。本文参考了Element官方文档Element - The world's most popular Vue UI framework。里面有更多详细介绍!

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐