Vue和el-input输入框实现table数据的模糊查询方法
本文主要介绍了关于 vue 结合 element-ui 实现 table 表格数据的模糊查询的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
实现原理
原生 js 的 indexOf()方法,该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。
如果在数组中没找到指定元素则返回-1。
下面先看示例:
搜索前:
搜索后:
实现代码如下:
searchEnterFun(e:any){ var keyCode = window.event? e.keyCode:e.which; // console.log('回车搜索',keyCode,e); if(keyCode == 13 && this.searchContent){ // this.doneTableData :用于搜索的总数据 // toLowerCase():用于把字符串转为小写,让模糊查询更加清晰 let _search = this.searchContent.toLowerCase(); let newListData:any[] = [];// 用于存放搜索出来数据的新数组 if (_search) { this.doneTableData.filter((item:any) => { if (item.title.toLowerCase().indexOf(_search) !== -1 || item.content.toLowerCase().indexOf(_search) !== -1) { newListData.push(item); } }) } (this as any).doneTableData = newListData; } }
以上方法是根据 事项标题 进行查询的,如果在当前基础上增加对其它条件的搜索,比如 事项内容,我们只需要在原来的代码上增加一个判断条件即可,如:
if (item.title.toLowerCase().indexOf(_search) !== -1 || item.content.toLowerCase().indexOf(_search) !== -1) { newListData.push(item); }
以上就是今天码云笔记为大家带来的 Vue 和 el-input 输入框实现 table 数据的模糊查询方法的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码云笔记 mybj。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue和el-input输入框实现table数据的模糊查询方法
码云笔记 » Vue和el-input输入框实现table数据的模糊查询方法