VUE侧边导航栏实现筛选过滤的示例代码
更新时间：2023年05月17日 09:43:11 作者：晚风予星
本文主要介绍了VUE侧边导航栏实现筛选过滤的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
需求
实现侧边导航栏的同时，需要实现筛选功能。且由于导航名称中可能包含大写英文字母，所以还需要支持小写英文字母筛选。
筛选效果：
清除筛选条件：
思路
- 监听
el-input的回车事件：@keydown.enter.native - 将父组件传过来的导航栏数据进行深拷贝一层，并新建一个数组
newMenuList进行存储匹配的导航栏数据：const copySideMenuList = JSON.parse(JSON.stringify(this.sideMenuList));- 深拷贝一层，为了防止原数据在搜索一次后被篡改，因为引用的是同一个内存地址
- 将
el-input中输入的字符串中的小写字母转为大写字母：event = event.toUpperCase(); - 使用
includes方法判断导航栏的名字中是否有el-input中的数据，如果有则将这一项整个push到newMenuList中，最后判断newMenuList的length是否大于0，如果大于0则将newMenuList赋值给导航栏组件需要的数据中，如果newMenuList的length不大于0则进行提示：未匹配到该菜单 - 当
el-input执行clearable操作或者el-input中输入为空时，将父组件传过来的导航栏数据赋值到导航栏组件所需要的数据中
实现
- 这里使用到
el-input的clearable，@clear，@keydown.enter.native - 注意：因为是
el-input标签的本质其实是elementUI的一个组件，所以监听回车键需要添加事件修饰符.native，它允许我们在自定义的组件标签中添加原生的DOM事件- 其他的
elementUI组件也是可以用这个方法来绑定原生DOM事件 - 而
el-button之所以可以直接使用@click是因为elementUI在创建组件时就为<el-button>里面的<button>标签绑定了一个click事件，相当于是官方提前为我们准备好了一个click接口，我们看似是在调用原生js的click事件，实际上是在调用elementUI官方为我们提前准备好的方法。
- 其他的
主要代码如下：
<el-input placeholder="输入关键字进行过滤" v-model="filterText" class="side-menu__filter" size="small" clearable suffix-icon="el-icon-search" @clear="handleSearch(filterText)" @keydown.enter.native="handleSearch(filterText)"></el-input>
handleSearch(event) {
// 将将输入的字符串中的小写字母转为大写字母
event = event.toUpperCase();
let newMenuList = [];
// 将父组件传过来的导航栏数据进行深拷贝一层
const copySideMenuList = JSON.parse(JSON.stringify(this.sideMenuList));
copySideMenuList.forEach((firstItem) => {
// 循环判断导航栏数据是否匹配到搜索的字符
if (firstItem.label.includes(event)) {
newMenuList.push(firstItem);
}
if (!firstItem.label.includes(event) && firstItem.children) {
for (let secondItem of firstItem.children) {
if (secondItem.label.includes(event)) {
newMenuList.push(secondItem);
}
}
}
});
if (newMenuList.length > 0) {
this.menuList = newMenuList;
} else {
this.$message.warning('未匹配到该菜单');
}
// 搜索字符串为空时返回原数据
if (event == '') {
this.menuList = this.sideMenuList;
}
}到此这篇关于VUE侧边导航栏实现筛选过滤的示例代码的文章就介绍到这了,更多相关VUE侧边导航栏筛选过滤内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了浅谈VUE防抖与节流的最佳解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue中如何去掉input前后的空格问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本片文章给大家详细介绍了如何将Vue组件库发布到npm的方法以及代码示例分享，感兴趣的朋友参考学习下。2018-02-02
本篇文章主要介绍了浅谈Vue数据绑定的原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了Vue+Element实现网页版个人简历系统,需要的朋友可以参考下2019-12-12
这篇文章主要为大家介绍了Vue中使用及封装websocket示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
这篇文章主要介绍了如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要为大家介绍了Vue 项目中Echarts 5使用方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
这篇文章主要介绍了 Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
Vue中使用addEventListener添加事件、removeEventListener移除事件的示例详解
最近在项目中需要用到addEventListener监听滚动条滚动的高度，所以就研究了一下在vue中是怎么进行事件监听的，添加事件和移除事件结合示例代码给大家介绍的非常详细，需要的朋友参考下吧2022-12-12
最新评论