vue全文搜索

首先我们请求下来Table的数据之后我们分别赋值给两个值

//相当于table里面所有数据的赋值
loadAllWithPagination() {
                               var that = this;
                               $pnp.sp.web.lists
                                   .getByTitle("Requests")
                                  .items
                                        // .filter(`status eq 'In Progress'`)
                                        .orderBy("Id", false)
                                        .top(that.pageSize)
                                        .getPaged()
                                        .then(p => {
                                            console.log(p)
                                            var element = {};
                                            var items = p.results;
                                            for (var i = 0; i < items.length; i++) {
                                                element = {
                                                    id: items[i].ID,
                                                    requestID: items[i].Title == null ? "" : items[i].Title,
                                                    projectNo: items[i].ProjectNum == null ? "" : items[i].ProjectNum,
                                                    project: items[i].ProjectName == null ? "" : items[i].ProjectName,
                                                    brand: items[i].Brand == null ? "" : items[i].Brand,
                                                    requestBy: items[i].RequestBy_Name == null ? "" : items[i].RequestBy_Name,
                                                    Backup: items[i].RequestBy_backup_Name == null ? "" : items[i].RequestBy_backup_Name,
                                                    Fla: items[i].Fla == null ? "" : items[i].Fla,
                                                    DGDate: items[i].DGDate == null ? "" : items[i].DGDate,
                                                    FillingDate: items[i].FillingDate == null ? "" : items[i].FillingDate,
                                                    FillingRequestDate: items[i].FillingRequestDate == null ? "" : items[i].FillingRequestDate,
                                                }
                                                that.tableData_request.push(element)//table的数据
                                                that.tableData_request_shadow.push(element)//table的假数据
                                            }
                                            if (!p.hasNext) this.fullloaded = true;
                                            that.setNextPageObj(p)
                                        });
                                },

然后我们只需要一个搜索框去搜索即可

Search(val) {
//val相当于你搜索框里面的值
                                    if (val == null) {
                                        this.$message({
                                            message: 'Search text could not be blank',
                                            type: 'error'
                                        });
                                        return false;
                                    }
                                    var that = this
                                    var timer = setInterval(function () {
                                            var searchVal = val.toLowerCase();
                                            that.tableData_request = that.tableData_request_shadow.filter(function (rowItem) {
//rowItem就是每条数据
                                                return Object.keys(rowItem).some(function (key) {
//Object.keys就相当于遍历rowItem的数据 key就相当于建
                                                    console.log(key)
//如果键值是空那我们直接返回出去
                                                    if (rowItem[key] == null) return false
//如果不是 我们就需要判断 你输入框里面的值是否存在你每一个键值里面 如果在那就返回出去
                                                    return String(rowItem[key]).toLowerCase().indexOf(searchVal) > -1
                                                })
                                            });
                                            clearInterval(timer)
                                            that.loading = false;
                                    }, 100)
                                },

原理：首先拿到我们用过滤的方法遍历每个data，然后用Object.keys的方法拿到所有的data的字段，便且遍历然后每个data里面的key就是没有data的每一项的值，然后拿搜索的val进行比较然后最后找到的返回出去就实现了全文检索