element-ui 分页后序号递增问题( 例如: 1-5、5-10)、列隐藏问题

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版权协议,转载请附上原文出处链接和本声明。