html 部分
表格 el-talbe 组件
<template>
<el-table :data="tableData"
style="width: 100%">
<el-table-column type="index"
label="序号"
width="70">
<template slot-scope="scope">
<span>{{scope.$index+1+pageSize*(currentPage-1)}}</span>
</template>
</el-table-column>
<el-table-column prop="name"
label="名称"></el-table-column>
<el-table-column prop="type"
fixed="right"
label="操作">
<template slot-scope="scope">
<div @click="handleUpdate(scope.$index, scope.row)"
class="edit"></div>
<div @click="handleDelete(scope.$index, scope.row)"
class="del"></div>
</template>
</el-table-column>
</el-table>
</template>
el-table标签
<el-table :data="tableData"> tableData 是一个数组,里面每一项都是后端返回的一条数据
分页 el-pagination 组件
<el-pagination layout="prev, pager, next, jumper, sizes"
:current-page="currentPage"
:page-sizes="[10,15, 20, 50]"
:page-size="pageSize"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="tableDataTotal"></el-pagination>
js 部分
export default {
data: function () {
return {
pageSize: 10,// 当前页面的条数
currentPage: 1, // 当前是第几页
};
},
methods: {
// 条数改变
handleSizeChange(val) {
this.pageSize = val;
this.refreshPage();
},
//页码改变
handleCurrentChange(val) {
this.currentPage = val;
this.refreshPage();
},
// 请求刷新表格数据
refreshPage() {
let obj = {
current: this.currentPage,
size: this.pageSize
};
//这个是请求页面数据的函数,具体使用根据实际项目中来
this.loadTableData(obj);
},
handleUpdate() {
// 编辑操作,操作成功后调用 refreshPage 刷新数据
this.refreshPage();
},
handleDelete() {
// 删除操作
// 删除成功后不能立即调用 refreshPage。需要判断当前的页码和条数,再请求。
this.currentPage = pageSizeFilter(this.tableDataTotal,this.pageSize,this.currentPage);
// 上面代码的目的。 当分页10条/页,实际数据有11条,页面页码可以显示第二页。
//页面切换到第二页上,这时候页面只又第11条数据。点击删除,别去在请求后没有上面的方法修改页码。页面上会出现空白的列表。并且选中的页码选中的是第一页。
// 加上后就不会出现该情况。
// 删除成功,重新请求页面刷新数据。
this.refreshPage();
},
/*
* listTotal 当前数据总条数
* pageSize 当前页面条数
* currentPage 当前页码
*/
pageSizeFilter(listTotal, pageSize, currentPage) {
let totalPage = Math.ceil((listTotal - 1) / pageSize);
let currentP = currentPage > totalPage ? totalPage : currentPage;
currentPage = currentP < 1 ? 1 : currentP;
return currentPage
}
},
mounted() {
// 页面加载的时候请求一次数据,
this.refreshPage()
}
}
上述代码中要注意的
上面的代码都是部分代码,需要根据实际情况进行修改
- 表格中的 type=“index” 这一列,需要填写template 中的内容。如果不加,第一页是正常显示前10条,但是到第二页的时候,页面的显示条数还是1-10。
- handleDelete 删除的方法中,需要判断数据总条数、页码、页面可展示条数之间的关系。
- tableData 和 tableDataTotal 。 都是请求后后台返回的。后台的返回的数据中,必须包含 tableData 当前页面展示的部分数据;tableDataTotal 当前页面所有数据的总数目,这个并不是tableData.length 获取到的。
- tableData 和 tableDataTotal 。根据实际情况,可以使用vuex 或者是直接的方式获取。