通过vue实现elemen-ui中的表格的模糊搜索

一.效果

在输入框中输入相应的字符，下方搜索列表呈现相应的数据
如图：

二.思路

1.可以通过监控有关列表的数据的变化，即通过输入的字段操作列表数据数组
----可通过计算属性直接监控数组数据----computed
2.返回的必定是符合条件的数据，可使用----数组遍历中的----filter
3.但白哦个数据都是对象数组，一层遍历只能得到对象，并不能得到其中的属性值------可通过将对象变成数组进行遍历----object.keys(),返回一个可枚举的属性名数组
4.通过some()方法进行遍历，对每个数组元素都进行遍历，当满足条件，则表达式返回true，否则为false，且此时剩下的元素将不会进行检测
5.当遍历最后，some()返回true，此时filter()将会将此时符合条件的数据组成新数组

三.代码实现

vuejs部分

 data () {
    return {
      msg: '',
      search:'',
      datas:[         ---------对渲染数据的数组数据做出限制的data中的数据数组
        {
          date: '2016-05-02',
          name: '王辉',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '李云',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '赵虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '钱小龙',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },

计算属性部分(通过对data中的数据进行对渲染数据进行限制)
——用于计算在template模板中的变量，该变量一般为插值表达式中的变量
——通过在computed中对该变量进行操作和计算，一般而言，操作的数据在data中，通过data中的数据来限制插值表达式中的变量
——优点：
——与watch功能差不多，可实现监控变量
——防止差值表达式中的复杂的逻辑堆叠
——且其计算属性拥有缓存功能，即只要data中的相关联的数据不发生改变，其computed中的计算的变量或者属性就不会再次调用或者刷新

  computed:{
    tableData(){
      const search=this.search;
      if(search){
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
       return this.datas.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              //Object.keys()---如果处理对象，将返回一个可进行枚举的属性数组，注意，是返回一个数组，是通过属性名组成的数组
              //Object.keys()---参数：要返回其枚举自身属性的对象；  返回值：一个表示给定对象的所有可枚举属性的字符串数组
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
      }
        return this.datas
      }
  }