【通俗易懂】vue-elementul实现表格分页功能-详细解释，新手必看

还是先上效果图

在这里插入图片描述

思路

输入框，按钮，表格，分页等都是用的elementul的组件。
获取数据的方法：
写一个请求方法，去后台获取列表的数据，同时把你的当前页和每页显示多少条的变量发给后台。然后后端以此判断给你哪一页的数据和每页给你多少条数据。直接给你筛选完返回给你，然后你把数据给到你的表格数据的变量，比如我这里的dataList: []。然后你的el-table就可以用属性:data="dataList"把数据渲染出来。就完成了，是不是很简单。这就是核心思路。
点击分页跳转功能：
这个功能更简单，就是elementul的分页组件自带的方法，可以再当前页和每页条数发生变化时回调，也就是触发事件。所以就可以用这个功能来做，当页码或者没页数发生变化时，触发方法，方法内把改变后的页码传给你早就设定好的变量存起来，然后再次调用获取数据的方法，从新拉一遍数据，这时候你的变量内页码已经变了，所以拉出来的数据自然也是对应页面的数据。

上代码

建议结合我说的思路和我的详细注释来看一遍，你们就应该懂逻辑了。这要是还看不懂的可以评论提问

javascript"><template>
  <div class="mod-log">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
    :header-cell-style='{background:"#f0f0f0",color:"#222",borderRight:"1px solid #d3d3d3"}'
      :data="dataList"
      stripe
      border
      v-loading="dataListLoading"
      style="width: 100%;min-height:440px;font-size:16px;">
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        width="50"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="username"
        header-align="center"
        width="78"
        align="center"
        label="用户名">
      </el-table-column>
      <el-table-column
        prop="operation"
        header-align="center"
        :show-overflow-tooltip="true"
        width="128"
        align="center"
        label="用户操作">
      </el-table-column>
      <el-table-column
        prop="time"
        header-align="center"
        align="center"
        width="128"
        label="执行时长(毫秒)">
      </el-table-column>
      <el-table-column
        prop="ip"
        header-align="center"
        align="center"
        width="150"
        label="IP地址">
      </el-table-column>
      <el-table-column
        prop="createDate"
        header-align="center"
        align="center"
        width="180"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="method"
        header-align="center"
        align="center"
        width="500"
        :show-overflow-tooltip="true"
        label="请求方法">
      </el-table-column>
      <el-table-column
        prop="params"
        header-align="center"
        align="center"
        width="800"
        :show-overflow-tooltip="true"
        label="请求参数">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dataForm: {
          //用户搜索框内搜索的值
          key: ''
        },
        //表格获取的数据
        dataList: [],
        //当前页数
        pageIndex: 1,
        //每页显示多少条
        pageSize: 10,
        //总条数
        totalPage: 0,
        //loading图不显示
        dataListLoading: false,
        selectionDataList: []
      }
    },
    created () {
      //进页面后直接获取数据
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        //loading图显示
        this.dataListLoading = true
        //发请求获取数据
        this.$http({
          url: this.$http.adornUrl('/sys/log'),
          method: 'get',
          params: this.$http.adornParams({
            //传过去当前的页码和每页显示多少
            'page': this.pageIndex,
            'limit': this.pageSize,
            //用户搜索输入的值
            'key': this.dataForm.key
          })
        }).then(({data}) => {
        //这个code是后台返回的状态码，如果为0代表正常，其他代表出错，这个地方根据你们公司不同情况更改。
          if (data && data.code === 0) {
            //返回列表数据
            this.dataList = data.page.list
            //返回分页的总条数
            this.totalPage = data.page.totalCount
          } else {
            //如果状态码不等于0，数据为空
            this.dataList = []
            this.totalPage = 0
          }
          //loading图隐藏
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        //把每页的数量给到pageSize
        this.pageSize = val
        //当前页1
        this.pageIndex = 1
        //从新获取数据列表
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        //当前页给到pageIndex
        this.pageIndex = val
        //从新获取数据列表
        this.getDataList()
      }
    }
  }
</script>