表格 前端分页

1、template

<el-input
  prefix-icon="el-icon-search"
  placeholder="输入关键词搜索"
  v-model="searchKeyword"
  style="width: 300px;border: #cccccc"
  clearable>
</el-input>

<el-table
  v-loading="listLoading"
  element-loading-text="获取数据中，请耐心等待"
  height="100%"
  :data="tbdata"
  border
  style="width: 100%">
。。。

</el-table>

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 50, 100]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="totalCells">
</el-pagination>

2、data

searchKeyword: ''

3、computed

computed: {
  tbdata () {
    return this.searchFilterWord()
  }
}

4、methods

// table数据入口（tbdata）
searchFilterWord () {
  let data = this.allData
  let vm = this
  // console.log(data)
  let search = data.filter((val) => {
    if (val.name.includes(vm.searchKeyword) || val.imei.toString().includes(vm.searchKeyword)) {
      return true
    }
  })
  vm.totalCells = search.length
  let arr = []
  for (let i = (vm.currentPage - 1) * vm.pageSize; i < vm.currentPage * vm.pageSize; i++) {
    if (!search[i]) {
      break
    }
    arr.push(search[i])
  }
  return arr
},