<div class="deit"> <div class="crumbs"> <el-breadcrumb separator="/"> <el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item> <el-breadcrumb-item>用户列表</el-breadcrumb-item> </el-breadcrumb> <div class="cantainer"> <el-table style=" 100%;" border class="tabBg" :data="allList.slice((currentPage-1)*pagesize,currentPage*pagesize)" //当后端返回所有的数据时对数据的处理,最为重要的一句代码,如果是通过pageSize,和currentpage返回的数据就不需要这么写,直接写他的dateList就行。 > <el-table-column type="index" width="50"> </el-table-column> <el-table-column label="日期" prop="date" width="180" header-align="center" align="center"> </el-table-column> <el-table-column label="用户姓名" prop="name" width="180"> </el-table-column> <el-table-column label="邮箱" prop="email" width="180"> </el-table-column> <el-table-column label="地址" prop="address" width="200"> </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="userList.length"> //这是显示总共有多少数据, </el-pagination> </div> </div> </div> data () { return { currentPage:1, //初始页 pagesize:10, // 每页的数据 allList: [] } }, created() { this.handleallList() }, methods: { // 初始页currentPage、初始每页数据数pagesize和数据data handleSizeChange: function (size) { this.pagesize = size; console.log(this.pagesize) //每页下拉显示数据 }, handleCurrentChange: function(currentPage){ this.currentPage = currentPage; console.log(this.currentPage) //点击第几页 }, handleUserList() { this.$http.get('http://localhost:3000/userList').then(res => { //这是从本地请求的数据接口, this.allList = res.body }) } }
style{
.tabBg .el-table_header-wrapper .has-gutter tr:nth-of-type(1) th{
background-color: #eaeff5;
color:#333;
}
}