Vue.js+Element：根据指定表格项查询表格

效果

代码

<template>
  <div class="app-container">
    <div style="margin-top:20px">
      <el-input v-model="tableDataName" placeholder="请输入姓名" style="width:240px"/>
      <el-button @click="doFilter">搜索</el-button>
    </div>
    <el-table
      :data="tableDataEnd"
      style="width:100%"
      border
      fit>
      <el-table-column label="#" width="55">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Name" width="120">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="Address" width="140">
        <template slot-scope="scope">{{ scope.row.address }}</template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pageSize"
      :total="totalItems"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableDataBegin: [
        {
          id: '1',
          name: '李明明',
          address: '海淀区信息路'
        },
        {
          id: '2',
          name: '张红',
          address: '朝阳区'
        },
        {
          id: '3',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: '4',
          name: '王二虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: '5',
          name: '王大虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      tableDataName: '',
      tableDataEnd: [],
      currentPage: 1,
      pageSize: 4,
      totalItems: 0,
      filterTableDataEnd: [],
      flag: false
    }
  },
  created() {
    this.totalItems = this.tableDataBegin.length
    if (this.totalItems > this.pageSize) {
      for (let index = 0; index < this.pageSize; index++) {
        this.tableDataEnd.push(this.tableDataBegin[index])
      }
    } else {
      this.tableDataEnd = this.tableDataBegin
    }
  },
  methods: {
    // 前端搜索功能需要区分是否检索,因为对应的字段的索引不同
    // 用两个变量接收currentChangePage函数的参数
    doFilter() {
      if (this.tableDataName === '') {
        this.$message.warning('查询条件不能为空!')
        return
      }
      this.tableDataEnd = []
      // 每次手动将数据置空,因为会出现多次点击搜索情况
      this.filterTableDataEnd = []
      this.tableDataBegin.forEach((value, index) => {
        if (value.name) {
          if (value.name.indexOf(this.tableDataName) >= 0) {
            this.filterTableDataEnd.push(value)
          }
        }
      })
      // 页面数据改变重新统计数据数量和当前页
      this.currentPage = 1
      this.totalItems = this.filterTableDataEnd.length
      // 渲染表格,根据值
      this.currentChangePage(this.filterTableDataEnd)
      // 页面初始化数据需要判断是否检索过
      this.flag = true
    },
    // openData() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      /* this.handleCurrentChange(this.currentPage) */
      this.handleCurrentChange(1)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      // 需要判断是否检索
      if (!this.flag) {
        /* this.currentChangePage(this.tableDataEnd) */
        this.currentChangePage(this.tableDataBegin)
      } else {
        this.currentChangePage(this.filterTableDataEnd)
      }
    }, // 组件自带监控当前页码
    currentChangePage(list) {
      let from = (this.currentPage - 1) * this.pageSize
      const to = this.currentPage * this.pageSize
      this.tableDataEnd = []
      for (; from < to; from++) {
        if (list[from]) {
          this.tableDataEnd.push(list[from])
        }
      }
    }
  }
}
</script>