vue+element-ui的表格组件实现简单的搜索框功能

在使用element-ui的表格组件时，遇到了搜索框功能的实现问题。它官网的表格组件展示里有一个自定义表头的实现(其图如下)，但是并没有给出搜索框的实现代码。

搜索了一下网上的资料，发现大多都是前端来实现的。我想搜索功能也应该交由前端来实现，交由后端的话可能会增加后端服务器的负担，能给前端浏览器做的就给。

搜索功能应该是模糊匹配，目前想到的实现方法是：将el-table中的data属性绑定为到一个计算属性上，这个计算属性根据搜索框的内容，来返回匹配上搜索内容的数据。

一种实现方法是：

computed: {
  tables(){
    let search = this.search.toLowerCase();
    if(search){
      // tableData是要放在表格中展示的数据
      return this.tableData.filter(data =>{
        // 获取对象数组的所有枚举属性，通过some来判断对象中的某一属性是否匹配上，如果匹配上了那么这个对象后面的属性就不用判断了，从而返回整个对象(毕竟我们要看整个对象的值)。
        return Object.keys(data).some(key =>{
          if(data[key] !== null) // 对象的属性不为空才进行模糊匹配，否则会报错
            return data[key].toString().toLowerCase().indexOf(search) > -1;
        });
      });
    }else{
      return this.tableData; // 如果搜索框没有值，就正常展示表格的所有数据
    }
  }
},

这种实现方法是先通过filter遍历对象数组中的每个对象，然后用Object.keys来获取对象的枚举属性，也就是key: value中的key，最后用data[key]来获取对象属性的每个值。使用Object.keys获取到的是对象的枚举属性构成的数组，获取这些属性的顺序与手动遍历该对象时的属性一致，也就是和正常循环遍历该对象时返回的顺序一致 。它是先根据数字顺序对属性排序，再按照对象定义的顺序排序余下的属性。比如：

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

还有另一种实现方法是使用for…in来实现：

computed: {
  tables(){
    let search = this.search.toLowerCase();
    if(search){
      return this.compData.filter(data =>{
        for(let d in data){
          if(d.toString().toLowerCase().indexOf(search) > -1) return true;
          else false;
        }
      });
    }else{
      return this.compData;
    }
  }
},

这种实现方法无非就是不使用Object.keys遍历一遍获得key，再用key来获取value，而是直接遍历对象自身的所有属性。但好像eslint 不推荐使用for…in来遍历对象。但能用就行，这种简单的搜索功能就是遍历所有属性的值，只要能遍历到所有属性的方法就能用。