el-table 中设置分页显示数据

在elementUI中，利用Pagination设置table分页显示数据

首先拿到一个table,并添加两个变量，pageSize和currentPage，分别表示页面显示的条数和当前页面，当前页面初始为1,

<template>
  <el-table
    :data="tableData"
    height="250"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        pageSize:10,
        currentPage: 1,
        total: 0
      }
    }
  }
</script>

---

然后拿到Pagination标签,默认拿到的标签中total对应的数据是一个常量，我们需要把它改成一个变量total，并将这个变量添加进data中，data添加见上一段代码里，初始为0

<el-pagination
  background
  layout="prev, pager, next"
  :total="total">
</el-pagination>

在handleSizeChange方法中修改pageSize的值为val，在handleCurrentChange方法中修改currentPage的值为val，注意这两个val不是同一个val！(前面两个方法在elementUI中表格标签中往下翻可以找到)

handleSizeChange(val) {
            console.log(`每页 ${val} 条`); // 注意！！！这里的单引号不能改！！！否则无法输出val的值
            this.pageSize = val
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage=val
        }
}

---

然后连接数据库，把数据库里的每一项条目以及数据总的条数这两个值都要拿到，因为要设置显示的总数

	// 获取所有人的信息
	// 注意！get中的参数要根据你的后端设置来设置，每个人的都是不一样的
   this.$http.get("/tb_user").then(response=>{
     this.tableData = response.data; // 拿到服务器数据到tableData中
     console.log(this.tableData)
   }),
   // 查询总数据条数
   this.$http.get("/tb_user/123").then(response=>{
     this.total = response.data; // 拿到总数total
     console.log(this.total)
   })

---

接下来最重要的一步来了，你需要把el-table第一行的data中的内容进行修改，否则你无法让他进行分页显示，而是直接把所有数据全部显示在一页了，而且切换也无效，之前定义的两个页面参数要与下边的两个参数设置得一样！！！

:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"

到这里就大功告成了！我的效果图如下，这是第一页显示的数据

这是第二页显示的数据

---

至于后端怎么实现的，如果你不会的话建议去自学一下Spring系列课程，这个一时半会讲不清楚，并且笔者也是刚学

添加额外功能 实时获取后台数据进行渲染

由于笔者是入门，对于很多东西都不了解，因此选择了最笨的方法，就是通过定时地获取后台进行所谓的实时刷新实现数据的实时更新效果的。
在methods里添加timer方法

timer(){
          return setTimeout(() => {
              this.getSQLData()
          }, 10000);
        }