前端搜索过滤框

最新推荐文章于 2023-03-20 15:15:08 发布

weixin_44677402

最新推荐文章于 2023-03-20 15:15:08 发布

阅读量569

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44677402/article/details/111292077

版权

这篇博客详细介绍了如何使用Vue.js实现前端搜索过滤框的功能。通过监听搜索框变化，调用v-model绑定的方法，结合:filter-node-method属性定义的filterNode方法，对Tree组件的数据进行筛选，实现节点的显示与隐藏。文中提供了关键代码示例，包括搜索框、Tree组件、数据结构、监视器方法以及过滤方法的实现。

摘要由CSDN通过智能技术生成

运行流程
监听器监听到搜索框发生改变
调用v-model参数方法，找到对应res值，
继而调用对应:filter-node-method="filterNode"方法
代码
1搜索过滤框
主要元素：
v-model=“name”

  <div >
          <el-input
            v-model="name"
            placeholder="请输入分类名称"
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
 </div>

2数据Tree树
主要元素：
:filter-node-method=“filterNode”
ref=“tree”

<div class="custom-tree-container">
          <div class="block">
            <el-tree
              v-loading="load"
              :data="CategoryOptions"
              node-key="id"
              :filter-node-method="filterNode"
              ref="tree"
              default-expand-all
              :expand-on-click-node="false"
            >
           </el-tree>
          </div>