elementUI el-table复选框选了之后再进行模糊搜索保留之前的，不改变selection选中状态

使用element-ui的reserve-selection属性。

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

1.html部分

<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"

2.js部分

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"保持一致

还可以解决分页失去选中状态的问题

转：elementUI-table模糊搜索，不改变selection选中状态_摄影陳的博客-CSDN博客