vue表格实现搜索功能

原表格中数据如图：

搜素后的内容如下：

方法一：直接搜索本地表格中的数据

1、首先在搜索按钮处配置点击事件以及输入框配置绑定模式，searchinfo可自定义，如图：

2、配置输入框默认值为空，声明一个新数组newList，如图：

3、search()函数的内容如下：

• 通过for循环遍历表格数据，this.tableData.length表示表格长度,可以理解为表格中数据条数
• 通过if判断表格中的某行数据的ip_address字段，通过indexOf返回this.searchinfo这个IP地址在字符串中首次出现的位置，如果检索不到返回-1，将循环获取的数据存进数组newList中
• 将原有数据tableData置空
• 将新的数据newList添加到原有数组中,通过push()

优点：检索快，不需要查询数据库

缺点：每次都要重新刷新后才可以再次搜索，因为第一次搜素后，表格数据已经被重置为搜索后的，再次搜索的时候并没有其余数据

二、通过远程，查询数据库中数据：

1、首先修改默认打开界面调用的钩子函数，如图：

上面的getList为获取数据的函数,第一个参数为要搜索的字段，由于默认打开不是搜索因此设置为null，第二个参数设置为1，表示默认获取第一页的数据

2、设置一个搜索变量初始值为空，如图：

为什么要设置整个初始变量？

因为后台的分页搜索设置的是根据搜索字段以及页数两个参数进行查找内容，如果不设置此变量，当我们第一次输入要搜索的字段后，查询到了数据，如果数据量超过10条，也就是到了第二页，当点击第二页的时候，此时调用后台的接口将缺少搜索字段这个参数，只传递了一个页数作为参数，那么搜索出来的结果将不是根据搜索字段匹配的，而是按照全部字段搜索匹配的第二页数据，因此在点击第二页或者更多页的时候，需要同时将搜索字段以及页数共同传递过去

3、查看getList函数，内容如下：

首先判断要搜索的内容是否为空，如果为空，说明此时不是要搜索，而是获取全部数据，因此执行正常的获取逻辑，并设置searchname的值为null，这样在点击下一页的时候，getList的第一个参数还是为空，否则调用搜索函数search，并将搜索字段和页数传递给过去，注意：默认情况下，输入搜索字段后，会将字段名与数字1传递给函数

3、查看search函数，内容如下：

第一个if语句主要用来判断是否输入了搜索字段，如果没有输入但是点击了搜索按钮，那么将提示”请输入要搜索的内容”，下面的this.searchname是将搜索的字段通过后台返回，并赋值给searchname，这样在点击下一页的时候，就可以再次将搜索字段传递给函数getList

search函数对应的页面搜索按钮，如图：

从上图看到，点击搜索按钮后，默认将要搜索的字段以及第一页传递给函数search，传递第一页的目的是在后台查询数据的时候是从id > 0开始查找(db.Where(“id > ?”,PageNum*PageSize))，具体可以查看后台接口

4、最后看一下点击下一页的函数，如图：

上图中函数就是点击下一页按钮时候调用的函数，从上图看出，点击按钮后，需要将搜索字段以及点击的页数传递给函数getList，如果searchname为空，那说明只是进行正常的翻页，如果不为空，说明是根据搜索字段进行翻页，这就是为什么还用到了getList以及searchname的原因

远程搜索总结：

• 定义一个搜索名字变量searchname，初始值为空
• 点击搜索按钮后，将搜索字段和第一页传递给函数search，根据搜索字段从id大于0开始查找
• 查找到数据后，后台将搜索字段名返回，赋值给searchname，当点击下一页的时候，调用getList将searchname和第2页传递给getList函数
• 默认情况下getList的第一个参数为null，第二个参数为1，此时可以理解为页面打开后，获取第一页数据，getList函数中也有对搜素字段SearchSystem进行判断，如果为null，说明没有搜索，正常获取数据，同时继续将searchname赋值为null，这样在点击下一页的时候，搜索字段还是为空，不会导致出现问题，如果搜索字段SearchSystem不为空，那么调用search进行搜索