vue + iview 实现 前端分页 + 搜索

第一步：

第二步：

第三步：

第四步（切换页码请求接口的情况）：

第五步（切换页码不请求接口的情况）：

第六步：

全部代码：

<template>
    <div>
        <Card>
            <Input v-model="entryName" placeholder="请输入项目名称..." style="margin-left:20px" clearable></Input>
            <Button type="primary" @click="search" >查询</Button>
            <Table  ref="table" editable :data="tableData" :columns="columns" stripe></Table>
            <Page :total="total" :current="current" :page-size='pageSize' @on-change="changePage" show-total style="display: flex;justify-content: flex-end;margin-top:20px"></Page>
        </Card>
    </div>
</template>

<script>
import { getProjectList, getDeploy } from '../../api/data'
export default {
  name: 'tables_page',
  data () {
    return {
      tableData: [], // 表格数据
      projectList: [], // 总数据
      inputVal: '', // 输入框的值
      entryName: '', // 搜索框的值
      tempArr: [], // 勾选的数据
      total: 0, // 总数据
      current: 1, // 当前页
      pageSize: 20, // 每页展示多少条数据
      columns: [
        { type: 'selection', width: 60, align: 'center' },
        { title: '序号',
          key: 'serialNumber',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'number',
                size: 'small',
                value: params.row.serialNumber
              },
              on: {
                input: (val) => {
                  this.inputVal = params.row.serialNumber = val
                }
              }
            })
          }
        },
        { title: '项目全称', key: 'jobFullName', sortable: true, align: 'center' }
      ]
    }
  },
  methods: {
    async init () {
      let res = await getProjectList()
      this.projectList = res.data.result.map(item => { // 处理后的数据
        return Object.assign({}, { id: item.id, jobFullName: item.jobFullName, checkBranch: 'master', serialNumber: this.serialNumber })
      })
      this.total = res.data.result.length
      let start = (this.current - 1) * this.pageSize
      let end = this.current * this.pageSize
      var temp = this.projectList.slice(start, end) // 截取之后的数据
      this.tableData = temp
      console.log(this.tableData)
    },
    // 切换页码
    changePage (val) {
      this.current = val
      var _start = (val - 1) * this.pageSize
      var _end = val * this.pageSize
      this.tableData = this.projectList.slice(_start, _end)
    },
    // 搜索
    search () {
      this.current = 1
      this.getList()
    },
    // 搜索出来的数据做处理
    getList () {
      let search = this.entryName
      let list = this.projectList.filter(item => item.jobFullName.includes(search)) // 查出来的数据
      this.total = list.length
      let start = (this.current - 1) * this.pageSize
      let end = this.current * this.pageSize
      var temp = list.slice(start, end) // 截取之后的数据
      this.tableData = temp
    }
  },
  mounted () {
    this.init()
  }
}
</script>