Vue.js+Element：表格分页和搜索

方法一

<template>
  <div style="margin-top: 20px">
    <div class="searchBox">
      <el-input v-model="searchTableInfo" prefix-icon="el-icon-search" placeholder="请输入搜索内容"
                style="width:240px"/>
    </div>
    <!-- 表格数据及操作 -->
    <el-table
      :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
      style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"/>
      <el-table-column prop="name" label="姓名" width="180"/>
      <el-table-column prop="address" label="地址"/>
    </el-table>
    <!-- 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示
           prev表示上一页，pager表示页码列表，next为下一页，
           size用于设置每页显示的页码数量,total表示总条目数，jumper表示跳页元素
           page-sizes每页显示个数选择器的选项设置,page-size每页显示条目个数
      -->
    <el-pagination
      :page-sizes="[3,6,8,10]"
      :page-size="pagesize"
      :total="tableData.length"
      center
      background
      layout="prev, pager, next, sizes, total, jumper"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTableInfo: '', // 搜索框中内容默认为空
      pagesize: 3, // 默认当前页面显示条目数
      currpage: 1, // 默认当前页面
      getSearchInfo: []
    }
  },
  computed: { // 根据计算属性模糊搜索
    tableData() {
      const searchTableInfo = this.searchTableInfo
      if (searchTableInfo) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 不会对空数组进行检测,不会改变原始数组。
        return this.getSearchInfo.filter(data => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          return Object.keys(data).some(key => {
            // return String(data[key]).toLowerCase().indexOf(searchTableInfo) > -1
            return String(data[key]).indexOf(searchTableInfo) > -1
          })
        })
      }
      return this.getSearchInfo
    }
  },
  created() {
    this.info()
  },
  methods: {
    handleCurrentChange(cpage) {
      this.currpage = cpage
    },
    handleSizeChange(psize) {
      this.pagesize = psize
    },
    info() { // 获取信息
      const 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 弄'
        }
      ]
      this.getSearchInfo = Data
    }
  }
}
</script>

方法二

<template>
  <div style="margin-top: 20px">
    <div class="searchBox"><!-- 模糊查询表内信息 -->
      <el-input v-model="searchTableInfo" prefix-icon="el-icon-search" placeholder="请输入搜索内容"
                style="width:240px"/>
    </div>
    <el-table
      :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
      style="width: 100%">
      <el-table-column align="center" label="姓名" width="350">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column align="center" label="昵称" width="350">
        <template slot-scope="{row}">{{ row.nikname }}</template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-sizes="[4,6,8,10]"
      :page-size="pagesize"
      :total="tableData.length"
      center
      background
      layout="prev, pager, next, sizes, total, jumper"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"/>
  </div>
</template>

<script>
import { getData } from '@/api/user-info'
export default {
  data() {
    return {
      loading: true,
      searchTableInfo: '',
      pagesize: 6, // 默认当前页面显示条目数
      currpage: 1, // 默认当前页面
      user: []
    }
  },
  computed: {
    tableData() {
      const searchTableInfo = this.searchTableInfo
      if (searchTableInfo) {
        return this.user.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key]).toLowerCase().indexOf(searchTableInfo) > -1
          })
        })
      }
      return this.user
    }
  },
  created() {
    this.loadTableData()
  },
  methods: {
    handleCurrentChange(cpage) {
      this.currpage = cpage
    },
    handleSizeChange(psize) {
      this.pagesize = psize
    },
    loadTableData() { //获取后台数据
      this.loading = true
      getData().then(res => {
        this.user = res['...']
        this.loading = false
      }).catch((error) => {
        console.log(error)
        this.loading = false
      })
    }
  }
}
</script>

参考：vue+element的表格分页和搜索功能（使用计算属性进行搜索）