最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

Vue和el-input输入框实现table数据的模糊查询方法

本文主要介绍了关于vue结合element-ui实现table表格数据的模糊查询的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

实现原理

原生js的indexOf()方法,该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组start处或数组的开头(没有指定start参数时)。如果找到一个item,则返回item的第一次出现的位置。开始位置的索引为0。

如果在数组中没找到指定元素则返回-1。

下面先看示例:

搜索前:

Vue和el-input输入框实现table数据的模糊查询方法

搜索后:

搜索后数据展示

实现代码如下:

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。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » Vue和el-input输入框实现table数据的模糊查询方法

发表评论