element el-table 前端搜索 filter

效果：

实际上，这种功能不限于应用在el-table，单纯用个div for循环也是没问题的。

一、 优劣分析

优势：
能解决搜索功能对源数据污染的问题。
我们都知道，搜索功能可以用另一种功能实现-> 一个数组存源数据，一个数组作为页面显示的数据。
但这样各种页面操作都要同时更新两个数组，1.浪费时间，2.代码冗余，3.最可怕的是可能会有未知的bug等着你发现。
用这种computed+filter的话，相当于将你想显示的数据显示出来，不想显示的隐藏起来，后顾无忧。
劣势：
如果数据过多，这样方式可能不太适合，过滤器越复杂越容易卡，以一千的体量来说应该是支持的。

二、实现方式

第一步：使用el-table，设置data

:data="tables"

第二步：在computed动态更新tables

computed: {
   
      // 前端过滤搜索
      tables: function () {
   
        var search = this.search;
        if (search) {
   
          search = search.toLowerCase(); //英文大写转小写
          let _this = this;
          return this.allList2.filter(function (dataNews) {
   
            return Object.keys(dataNews).some(function (key) {
   
              if (key == "name") {
    //只根据名称列搜索
                let name = String(dataNews[key]).toLowerCase(); //英文大写转小写，indexOf方法严格区分大小写
                if (name.indexOf(search) > -1) {
   
                  return true;
                } else {
   
                  return false;
                }
              } else {
   
                return false;
              }
            });
          });
        }
        return this.allList2;
      },
    },

三、全部代码

<template>