elementUI-table模糊搜索，不改变selection选中状态

首先模糊搜索，参考文章
利用 Vue 和 element 的实现table表格数据的模糊匹配搜索
原理是利用计算属性computed对表格进行筛选

但是如果是带有复选框的表格，会出现搜索重置选中状态的问题，搜了一大堆解决办法，发现最终可以使用element-ui提供的reserve-selection轻松解决。

注意：reserve-selection仅对 type=selection 的列有效，类型为 Boolean，为 true时会在数据更新之后记住之前选择的数据（需要指定row-key）

主要代码如下：

<el-table
    :data="tables"
    :row-key="getRowKey"
    ref="sort"
>
    <el-table-column
      type="selection"
      :reserve-selection="true">
    </el-table-column>
    <el-table-column
      prop="id"
      label="编号">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="手机号">
    </el-table-column>
</el-table>

注意tableData初始化的时候要为[ ]，而不能为null，要不会报错
"TypeError: Cannot read property ‘reduce’ of null"

data() {
  return {
    tableData: [],
    search: '',
  }
},
computed: {
  tables: function() {
    const search = this.search
    if (search) {
      return this.tableData.filter(data => {
        return Object.keys(data).some(key => {
          return String(data[key]).toLowerCase().indexOf(search) > -1
        })
      })
    }
    return this.tableData
  }
},
methods: {
    // 指定一个key标识这一行的数据
    getRowKey (row) {
      return row.id //id为row的data属性之一，必须唯一且与tableData中保持一致
    }
}

如果有的事件不需要保存选中状态，则可在相应函数中添加如下代码：

this.$refs.sort.clearSelection()  //此sort与<el-table>中ref="sort"保持一致

此方法很简单，而且可以解决分页失去选中状态的问题