一、需求问题
在vue的开发中,如果需要开发管理系统,那么Element UI
就是一个不错的UI框架。在Element UI
中的表格数据,如果数据量大的话,通过后端进行分页。如果数据量不大的话,我们可以直接通过前端进行分页。在Element UI
中也提供了分页组件 el-pagination
,下面就是通过 el-pagination
实现表格的分页功能。
二、需求分析
在使用Element UI
的el-pagination
分页组件的时候,需要写明 page-size
、current-page.sync
和total
,page-size
是每页的数据条数,current-page
是初始页,total
是默认的数据总数,绑定属性,在data
中也同样设置好currentPage
和 pageSize
的值。由于需要对整个表格的数据进行分页,那么在el-table
中的data
也需要进行计算属性,比如说:data="nowTableData"
,那么在computed
中,进行相关的计算,对数据请求进行处理。
三、需求实现
代码完整示例如下:
<template>
<div>
<el-table
:data="nowTableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="注册日期">
</el-table-column>
<el-table-column
prop="username"
label="用户姓名">
</el-table-column>
<el-table-column
prop="email"
label="用户邮箱">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<!-- scope.$index 为每行的索引 scope.row 为每一行的数据 -->
<el-button size="small" @click="handleToFreeze(scope.$index, scope.row)">{{ scope.row.isFreeze ? "已冻结" : "未冻结" }} </el-button>
<el-button size="small" @click="handleToDelete(scope.$index, scope.row)" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination class="page"
background
layout="prev, pager, next"
:page-size="pageSize"
:current-page.sync="currentPage"
:total="tableData.length">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'users',
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 3
}
},
mounted() {
this.axios.get('/api2/admin/usersList').then((res) => {
var status = res.data.status;
if ( status === 0 ) {
this.tableData = res.data.data.usersList;
}
});
},
computed: {
nowTableData() {
return this.tableData.slice( (this.currentPage -1) * this.pageSize, this.currentPage * this.pageSize) || [];
}
},
methods: {
handleToFreeze (index, row) {
// index是每行的索引, row是每行的数据
// console.log(index, row);
this.axios.get('/api2/admin/updateFreeze', {
email: row.email,
isFreeze: !row.isFreeze
}).then((res) => {
var status = res.data.status;
if ( status === 0) {
this.$alert('冻结操作已成功', '信息', {
confirmButtonText: '确定',
callback: action => {
this.tableData[index].isFreeze = !row.isFreeze;
}
});
}
else {
this.$alert('冻结操作失败', '信息', {
confirmButtonText: '确定'
});
}
});
},
handleToDelete (index, row) {
this.axios.get('/api2/admin/deleteUser', {
email: row.email
}).then((res) => {
var status = res.data.status;
if ( status === 0) {
this.$alert('删除操作已成功', '信息', {
confirmButtonText: '确定',
callback: action => {
this.tableData.splice(index, 1);
}
});
}
else {
this.$alert('删除操作失败', '信息', {
confirmButtonText: '确定'
});
}
});
}
}
}
</script>
<style scoped>
.page { margin-top: 20px; }
</style>