element-ui 分页后序号递增问题( 例如: 1-5、5-10)、列隐藏问题
说明 : 在使用element-ui进行分页的时候,我们需要在数据表格的最前方添加一个序号,但是如果直接使用数据库的id作为序号在有默认排序功能时,id的序号也会一同倒序。这种时候我们就要自定义序号,而id可能需要因为一些编辑操作而留存,只要隐藏就可以。
直接上代码 :
<!-- 序号列代码:
currentPage : 当前页
pageCount : 每页显示的条数
-->
<el-table-column label="序号" width="50">
<template slot-scope="scope">
<span>{{(currentPage - 1) * pageCount + scope.$index + 1}}</span>
</template>
</el-table-column>
<!--
Data中的数据,这个就应该不用说了,写你自己的Data代码就可以了
我这里就是演示
-->
export default {
name: "Provider",
data() {
return {
currentPage: 1, // 默认显示第几页
pageSizes: [5, 10, 15, 20, 25, 30], // 个数选择器
pageCount: 5,// 默认每页显示的条数
}
//在页码变更的方法中给data中的当前页重新赋值!否则每一页都是默认的。
//主要就是 this.currentPage = val
//"当前页"发生改变时绑定的函数
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
let self = this;
//给序号赋值(data中的当前页) !!!!!!!!!!这个代码重要!!!!
this.currentPage=val
axios({
url: "http://localhost:8081/mabuduo/sys/PageIF",
methods: "get",
params: {
"CurrentPage": val,
"PageSize": self.pageCount
}
}).then(response => {
self.tableData = response.data.pageList;
})
}
JS的代码是在这里调的,其实都到序号这一步分页应该都没问题。
<!--分页组件-->
<el-pagination class="tabListPage"
@size-change="handleSizeChange"
@current-change="handleCurrentChange" //页码发生变化调用
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageCount"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount" align="right">
</el-pagination>
id列隐藏代码 :
<!--
v-if 条件,只要将条件一直改为false就可以了。
-->
<el-table-column v-if="false" prop="id" label="id号" width="40" align="center"></el-table-column>
版权声明:本文为weixin_46417933原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。