【VUE】vue+elementui 实现分页效果

一、问题需求

当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。

需要的效果图为：

二、代码实现

1. html部分

<el-table
    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    stripe
    style="width: 100%">
    <el-table-column
      prop="databaseName"
      label="库名"
      width="200">
        <template slot-scope="scope">
            <a @click="handleClick(scope.row)" style="color:blue;cursor:pointer">{{ scope.row.databaseName }}</a>
        </template>
    </el-table-column>
    <el-table-column
      prop="comment"
      label="详情"
      width="200">
    </el-table-column>
    <el-table-column
      prop="address"
      label="存储地址"
      width="200">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="报警人"
      width="300">
     <template slot-scope="scope">
         <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.databaseName }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.databaseName }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
     <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
      </template>
      </el-table-column>
  </el-table>
  <!-- 下面是实现分页的重点 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"  
        :page-size="pagesize"       
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        style="float:right; margin-top:10px"
    />

2. script中data()初始化部分

data() {
    return {
        tableData: [],
        total: 0,
         // 查询参数
        currentPage:1, //初始页
        pagesize:10,    //    每页的数据
        formInline: {
          user: '',
          region: ''
        }
    }
  },

3. 一些方法

mounted() {
      const that = this
        getImpalaCatalogDatabase().then(response => {
              console.log(response)
              that.tableData = response
        });
  },
methods: {
    onSubmit() {
        console.log('submit!');
      },
    handleClick(row) {
        console.log(row);
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
            this.pagesize = size;
            console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
            this.currentPage = currentPage;
            console.log(this.currentPage)  //点击第几页
    },
    getList() {
    	const that = this
        getImpalaCatalogDatabase().then(response => {
              console.log(response)
              that.tableData = response
        });
    }
  }