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数据的模糊查询方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。