成功element ui分页1

<template>

<div>

<!--工具条-->

<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">

<el-form :inline="true">

<el-form-item>

<el-input v-model="usernamef" placeholder="用户名"></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" v-on:click="getUsers">查询</el-button>

</el-form-item>

<el-form-item>

<el-button type="info" @click="addUser">新增</el-button>

</el-form-item>

</el-form>

</el-col>

<el-table

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

style="width: 100%"

>

<el-table-column prop="id" label="ID" width="180"></el-table-column>

<el-table-column prop="username" label="用户名" width="180"></el-table-column>

<!--第二步 开始进行修改和查询操作-->

<el-table-column label="操作" align="center" min-width="100">

<template slot-scope="scope">

<el-button type="text" @click="checkDetail(scope.row)">查看详情</el-button>

<el-button type="info" @click="modifyuser(scope.row)">修改</el-button>

<el-button type="info" @click="deleteUser(scope.row)">删除</el-button>

</template>

</el-table-column>

<!--编辑与增加的页面-->

</el-table>

<el-pagination

layout="prev, pager, next, sizes, total, jumper"

:page-sizes="[5, 10,100]"

:page-size="pageSize"

:total="userInfoList.length"

@current-change="handleCurrentChange"

@size-change="handleSizeChange"

style="text-align: center;margin-top: 1%;"

></el-pagination>

</div>

</template>

<script>

import axios from "axios";

import qs from "qs";

import { toJSONSchema } from "mockjs";

export default {

data() {

return {

userInfoList: [],

pageSize: 5,

currentPage: 1,

usernamef: "",

};

},

mounted: function () {

this.loadData();

},

methods: {

loadData() {

let param = { username: this.usernamef };

// axios.get("http://localhost:12345/api/test/Gettest2?username="+this.usernamef).then((result) => {

axios

.get("http://localhost:12345/api/test/Gettest2?" + qs.stringify(param))

.then((result) => {

var _data = result.data.data;

this.userInfoList = _data;

});

},

handleCurrentChange: function (cpage) {

this.$data.currentPage = cpage;

},

handleSizeChange: function (psize) {

this.$data.pageSize = psize;

},

modifyuser(rowData) {

this.$router.push("/edit1?id=" + rowData.id);

},

getUsers() {

this.loadData();

},

checkDetail(rowData) {

this.$router.push("/detail1?id=" + rowData.id);

},

},

};

</script>

<style>

body {

background: #dfe9fb;

}

</style>