这也是在做项目中遇到的现在把它记录一下:上代码
:data="headeDataList.slice((pageNumHE-1)*pageSizeHE,pageNumHE*pageSizeHE)"//这个就是每页计算的要展示几条数据
然后就是table数据的长度,在vue中你可以定义一个值在变量中然后取值,也可以这样写:
:total="headeDataList.length"
最后就是分页器的设置:
methods: {
handleSizeChangeHE(val){
this.pageNumHE = 1;
this.pageSizeHE = val;
},
handleCurrentChangeHE(val){
this.pageNumHE = val;
}
}
现在把我在项目中做的记录一下:我这个是做在一个弹框里
html:
<el-dialog :close-on-click-modal="false" width="960px" title="详情" top="5vh" v-dialogDrag :visible.sync="dialogFormVisible1">
<!-- <el-main> -->
<h3>Header信息详情{{titleTime}}</h3>
<el-table :data="headeDataList.slice((pageNumHE-1)*pageSizeHE,pageNumHE*pageSizeHE)" v-loading="listLoading" border fit highlight-current-row
style="width:100%;min-height:500px;margin-top:8px" height="550" :header-cell-style="{background:'oldlace'}">
<el-table-column align="center" label="序号" type="index">
</el-table-column>
<el-table-column prop="id" align="center" label="part">
</el-table-column>
<el-table-column prop="pickUp" align="center" label="抓取数量">
</el-table-column>
<el-table-column prop="place" align="center" label="安装数量">
</el-table-column>
<el-table-column prop="error" align="center" label="错误数量">
<template slot-scope="scope">
{{scope.row.partNG + scope.row.pickMiss}}
</template>
</el-table-column>
<el-table-column align="center" label="PPM">
<template slot-scope="scope">
{{parseInt((scope.row.partNG + scope.row.pickMiss)/scope.row.pickUp*1000000)}}
</template>
</el-table-column>
</el-table>
<!-- </el-main> -->
<el-footer>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background
@size-change="handleSizeChangeHE"
@current-change="handleCurrentChangeHE"
:current-page="pageNumHE"
:page-sizes="[10,20,30,40]"
:page-size="pageSizeHE"
layout="total, sizes, prev, pager, next, jumper"
:total="headeDataList.length">
</el-pagination>
</div>
</el-footer>
</el-dialog>
js:
methods:{
// Header信息详情
handleUpdate1(row){
this.dialogFormVisible1 = true
const Lists = JSON.parse(row.headerData) //后台给我的是一个字符串,我要转成json格式的
console.log(JSON.parse(row.headerData))
this.headeDataList = Lists
this.titleTime = row.createTime //这个是一个标题
},
handleSizeChangeHE(val){
this.pageNumHE = 1;
this.pageSizeHE = val;
},
handleCurrentChangeHE(val){
this.pageNumHE = val;
}
}
最后是效果图: