element UI tree 搜索功能实现

这篇具有很好参考价值的文章主要介绍了element UI tree 搜索功能实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近需求想要一个树状结构的带搜索功能的目录,要求目录包含搜索文字的高亮,如果父级收起则父级高亮,如果跨级收起 则收起的级别高亮 不限制层级

例如:搜索文字为D,收起C则C高亮, 直接收起A则A高亮

A  

        B

                C 

                        D 

代码如下:

HTML代码:


<el-input
    v-model="text"
    placeholder="搜索"
    clearable>
</el-input>
<el-tree
  :data="data"
  :props="props"
   default-expand-all
   node-key="id"
   highlight-current
   ref="tree"
   :filter-node-method="filterNode"
   @node-collapse="closeNode"
   @node-expand='expandNode'
   @check="handleCheckChange">
     <span slot-scope="{ node }" class="custom-tree-node">
         <span v-if="!text">{{ node.label }}</span>
         <span v-else-if="nodeArr && nodeArr.indexOf(node.label) > -1" v-html=" `<font style='color:red'>${node.label}</font>`" />
         <span v-else-if="text" v-html="node.label.indexOf(text) > -1 ? `<font style='color:red'>${node.label}</font>` : `<font>${node.label}</font>`" />
     </span>
</el-tree>


JS代码:


data: {
    text: '',
    nodeArr: []
}
methods: {
    filterNode(value, data, node) {},
    // 循环递归
    getKeys(data, name) {
       if (data.length != 0) {
          data.forEach((item) => {
             if (item.name.indexOf(this.text) > -1) {
                  this.nodeArr.push(name);
             }
             if (this.nodeArr.indexOf(item.name) > -1) {
                  this.nodeArr.push(data.name);
             }
             if (item.children != null) {
                  this.getKeys(item.children, name);
             }
          });
       }
    },
    // 收起
    closeNode(value, data, node) {
        if (value.name.indexOf(this.text) == -1) {
            this.getKeys(value.children, value.name);
        }
    },

    // 展开
    expandNode(value, data, node) {
        if (this.nodeArr.indexOf(value.name) > -1) {
            this.nodeArr.splice(this.nodeArr.indexOf(value.name), 1);
        }
    }
}


注意:

1. text清空时记得将nodeArr清空

2. 这个方法在搜索的时候将树形结构全部展开,如果想要保持原来的结构不变,default-expand-all属性去掉,并在请求时进行循环递归一次 获取高亮的值放入nodeArr中文章来源地址https://www.toymoban.com/news/detail-861813.html

到了这里,关于element UI tree 搜索功能实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element UI 中的 el-tree 实现 checkbox 单选框功能,及 bus 传递参数的方法

    el-tree 单选功能 在日常项目开发中,会经常遇到,树形结构的查询方式,为了快速方便开发,常常会使用到快捷的ui组件去快速搭树形结构,这里我用的是 element ui 中的 el-tree 。第一次接触这种功能的时候也是各种网站查询,虽然也都能实现功能,但是都会有一些小问题,就

    2024年04月10日
    浏览(15)
  • Element-UI实现的下拉搜索树组件(el-select、el-input、el-tree组合使用)

    1、子组件封装 注意使用:正常使用 // 子组件使用 父组件调用

    2024年02月11日
    浏览(25)
  • element-ui的el-tree组件实现单选功能及选择子节点,获取所有父级节点或选中所有父级节点

    el-tree是不支持单选的,可以通过选中事件进行处理,实现单选

    2024年02月14日
    浏览(12)
  • 【vue+element UI】实现带全选、反选、联级、搜索的下拉多选框

    halo小伙伴们,在开发的过程中是否有遇到需要为下拉多选框添加操作按钮的,如全选、反选、联级、搜索的下拉选框呢?如图所示: 这里我们需要借助vue-treeselect插件(官方地址) 第一步,安装vue-treeselect插件 第二步,封装下拉框组件 第三步,在需要该组件的页面引入该组

    2024年02月15日
    浏览(12)
  • vue使用element-ui实现分页功能

    element-ui官网上有分页实现的功能,简单方便又好用,也有很多分页的样式,你可以根据需要去选择自己想要的样式。这里讲的是完整功能样式的一个分页实现。过程如下: 分页方法完成。

    2024年02月13日
    浏览(12)
  • vue写法——使用js高阶函数实现多条件搜索功能

    🙂博主:小猫娃来啦 🙂本文核心: vue封装——使用js高阶函数实现多条件搜索功能 之前出过一个react写法的前端搜索(react写法——使用js高阶函数实现多条件搜索功能) 今天我们再研究一下vue中怎么实现。 react和vue有什么区别? 这个区别要细说可太多了,但是最终都能归

    2024年02月11日
    浏览(18)
  • Vue + Element UI 实现权限管理系统 前端篇(十四):菜单功能实现菜

    菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作。 提供一个菜单查询接口,查询整颗菜单树形结构。 http/modules/menu.js 添加 findMenuTree 接口。 菜单管理界面 菜单管理界面是使用封装的表格树组件显示菜单结构,并提供增删改查的功能。 Menu.vue 其中对表格树组件进

    2024年02月10日
    浏览(11)
  • Vue结合element-ui实现导航菜单展开收缩小功能

    1. 先上个效果图    这里我把控制菜单收缩的放在中间了,是可以随便调整的。  2. 问题思路想法  ① 首先是布局,这就是个很经典的后台管理系统的容器页面,这里分为上下结构,上面一般放些系统logo、 登录的用户信息,还有一些小功能等等。然后下面又分为左右结构,

    2024年02月16日
    浏览(18)
  • vue2 - 基于Element UI实现上传Excel表单数据功能

    批量数据上传后台,需要从后台下载一个固定格式的 Excel表格,然后在表格里面添加数据,将数据格式化,再上传给后台,后台做解析处理,往数据库添加数据 点击导入excel按钮,跳转到上传excel功能页面,点击上传或者是通过拖拽都能实现excel表格上传 通过Element UI的 el-di

    2024年02月13日
    浏览(12)
  • Vue.js 中使用 Element UI 实现异步加载分页列表

    在前端开发中,我们常常需要展示大量数据,并提供分页浏览的功能。本篇博客将介绍如何使用 Vue.js 和 Element UI 组件库创建一个简单的异步加载分页列表。 Vue.js Element UI JavaScript 我们将创建一个包含表格和分页组件的 Vue 单文件组件。以下是组件的基本结构: 引入 Element U

    2024年02月04日
    浏览(18)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包