一、
思路：基于连续页码进行判断
需要添加分页器的组件（Search组件）中
<!-- 分页器 -->
<Pagination
:pageNo="searchParams.pageNo"
:pageSize="searchParams.pageSize"
:total="total"
:continues="5"
@getPageNo="getPageNo"
/>
1.在分页器组件上传递【当前页码pageNo】、【每页展示的数据pageSize】、【总的数据total】、【连续的页码（重要）】，定义一个【自定义事件getPageNo】把用户点击的【当前页码pageNo】传递回来，并进行数据请求
2.methods中定义函数接受分页器传回来的【当前页pageNo】
分页器，分成三部分 ------【如下图】
分页器组件（Pagination）中
1、通过props取得 Search组件传递的参数
props: ["pageNo", "pageSize", "total", "continues"], props: ["pageNo", "pageSize", "total", "continues"],
2、在分页器组件计算属性computed中计算总共多少页/最后一页 - this.total / this.pageSize
【记得向上取整Math.ceil()，例：当总的数据total=30，每页的数据pageSize=3，那么10页刚刚好展示完毕，如果每页的数据pageSize=4，有7页展示4条数据，还有2条需要下一页展示，所以进行取整，Math.ceil(30/4)=8】
3、在分页器组件计算属性computed中计算连续页码【至少5页】的起始数字start、结束数字end【当前页pageNo在连续页码中】
情况判断一：连续的页码 > 总的页数 【start=1，end=总的页数】
情况判断二：连续的页码 < 总的页数 【计算 start = pageNo - parseInt(continues / 2)、end = pageNo + parseInt(continues / 2);】
分情况一：start数字出现0 | 负数 【continues=5，pageNo=1、2的时候】
分情况二：end数字大于总页码 【continues=5，totalPage=30，pageNo=29、30的时候】
记得：最后把 start、end返回
上下一页 、第一页、最后一页的判断
上一页：如果当前页pageNo=1，就不显示上一页按钮，绑定点击事件，点击触发getPageNo自定义事件，把当前页pageNo-1当参数传递回search组件，请求上一页的数据
第一页：如果连续页码的起始数字start>1，就显示前面定义好的第一页；小于的话，显示连续页码中的第一页按钮。点击事件同上，由于可能处理选中状态，所以绑定一个类【已经在css中定义好的】，添加选中颜色，当然需要判断是否是选中的页
省略...小点：当连续页码的start=3时，显示，也就表示，他们之间还有一页
连续页码：通过v-for遍历数字，遍历连续页码中end，并判断其中的元素page>start，才显示【因为传过来的连续页码为5，所以在分页器中连续页码出现最大的就是end-start=5，去掉start之前的页码，才能使连续页码为5】，其他同上
省略...小点 | 最后一页 | 下一页：计算同上【totalPage是上面已经算完的总页数|最后一页】
二、
layout="prev, pager, next"
@current-change="changePageNum"
:current-page="pageNum"
:page-size="pageSize"
:total="total">
</el-pagination>
data（）{
return{
tableData: [],
total: 0,//总数
pageNum: 1,//当前页
pageSize: 15,//每页显示数量
}
}
mounted: function () {
this.query();//加载页面时，获取数据
},
methods:{
//切换页码
changePageNum: function (val) {
this.pageNum = val;
this.query();
},
//通过接口，获取数据
query: function () {
var data = {
name: this.name || '',
fleetId: this.FleetId,
pageNum: this.pageNum,//当前页
pageSize: this.pageSize//查询个数
};
RoleManage.getRole(data)
.then(res => {
var data = res;
if (res.success) {
this.tableData = data.obj.list;
this.total = data.obj.total;
this.name ='';
} else {
this.$message('查询失败');
}
}).catch(err => {
// 异常情况
console.log(err);
});
},
}实现自行分页：
//调度-系统通讯录分页
dispatchCourentPage: 1,
//调度-系统通讯录当前选中标签标记
dispatchCourentIndex: 1,
//调度-系统通讯录更多标记项:组id
dispatchMorecommandGroupId: '',
dispatchTotlePage: 0,
//上页
handleLastPage() {
if (this.dispatchCourentPage === 1) return;
this.dispatchCourentPage -= 1;
let index = this.dispatchCourentIndex;
if (this.dispatchMorecommandGroupId != '') {
this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId);
} else {
this.queryBookmember(index);
}
},
//下页
handleNextPage() {
if (this.dispatchCourentPage === this.dispatchTotlePage) return;
this.dispatchCourentPage += 1;
let index = this.dispatchCourentIndex;
if (this.dispatchMorecommandGroupId != '') {
this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId);
} else {
this.queryBookmember(index);
}
}使用监听属性控制分页显示：
computed: {
limitData() {
let data = [...this.table1Datas];
return data;
},
// 因为要动态计算总页数，所以还需要一个计算属性来返回最终给 Table 的 data
dataWithPage() {
const data = this.limitData;
const start = this.current * this.size - this.size;
const end = start + this.size;
return [...data].slice(start, end);
},
}三、
HTML：
<footer class="col-sm-12 footerbox navbar-fixed-bottom">
<div class="row">
<div class="col-sm-12">
<a class="btn btn-default" href="#" role="button">首页</a>
<a class="btn btn-default" href="#" role="button"><</a>
<!--<a v-for="(item,i) in pager" @click="toPager(i)" :class="['btn','btn-default',{active:item.status}]" role="button">{{item.id}}</a>-->
<a v-for="(item,i) in pager" @click="toPager(i)" class="btn btn-default" role="button">{{item.id}}</a>
<a class="btn btn-default" href="#" role="button">></a>
<a class="btn btn-default" href="#" role="button" @click="toLast">尾页</a>
</div>
</div>
</div>
</footer>js
var vue = new Vue({
el: '.App',
data: {
adminMessageList: [{ ainNickname: 1, ainCreateTime: "高级效果图", number: 1 }, { ainNickname: 2, ainCreateTime: "中级效果图", number: 1 }, { ainNickname: 3, ainCreateTime: "一般效果图", number: 1 }],
ddelAdminList:[],
pager:[
{id:1},
{id:2},
{id:3},
{id:4},
{id:5},
{id:6},
],
}
,
created: function () {
this.adminMessageList = this.getAdminMessage();
},
methods: {
getAdminMessage() {
var AdminMessageResult;
$.ajax({
type: "get",
async: false, // 同步 一定会等数据返回
data: {
currentPage:"1",
pageSize:"5"
},
url: "http://127.0.0.1:8088/admin/getAdminMessage",
success(res) {
AdminMessageResult = res;
},
error(res) {
}
})
return AdminMessageResult;
},
deleteSingle(i){
let that = this;
$.ajax({
type: "get",
async: true, // 同步 一定会等数据返回
data: {
ainNickname:this.adminMessageList[i].ainNickname,
},
url: "http://127.0.0.1:8088/admin/delete",
success(res) {
that.adminMessageList = res;
},
error(res) {
}
})
},
addadmin(){
var admin = [{"ainAdminIdCd":"2021-08-16 16:33:15","ainId":2,"ainNickname":"admin","ainPhone":"18173350047","ainEmail":"1349578685@qq.com","ainCreateTime":"2021-08-16 16:33:15"}]
this.adminMessageList.push(admin)
},
toPager(i){
let that = this;
alert(i+1)
// this.pager[i].status = true;
$.ajax({
type: "get",
async: true, // 同步 一定会等数据返回
data: {
currentPage:(i+1),
pageSize:"5"
},
url: "http://127.0.0.1:8088/admin/getAdminMessage",
success(res) {
that.adminMessageList = res;
},
error(res) {
}
})
},
toLast(){
console.log ()
alert(this.pager.length)
}
}
}
)四、
①创建自定义分页组件Pagination.vue：
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
interface Props { // 基于类型的声明
current: number // 当前页数
pageSize: number // 每页条数
total: number // 数据总数
pageListNum?: number // 显示的页码数组长度
hideOnSinglePage?: boolean // 只有一页时是否隐藏分页器
showQuickJumper?: boolean // 是否可以快速跳转至某页
showTotal?: boolean // 是否显示当前页数和数据总量
placement?: string // 分页器展示位置，靠左left，居中center，靠右right
}
const props = withDefaults(defineProps<Props>(), {
current: 1,
pageSize: 10,
total: 0,
pageListNum: 5,
hideOnSinglePage: false,
showQuickJumper: false,
showTotal: false,
placement: 'center'
})
const currentPage = ref(props.current) // 当前页数
const jumpNumber = ref('') // 跳转的页码
const forwardMore = ref(false) // 左省略号展示
const backwardMore = ref(false) // 右省略号展示
const forwardArrow = ref(false) // 左箭头展示
const backwardArrow = ref(false) // 右箭头展示
const totalPage = computed(() => { // 总页数
return Math.ceil(props.total / props.pageSize) // 向上取整
})
const pageList = computed(() => { // 获取显示的页码数组
return dealPageList(currentPage.value).filter(n => n !== 1 && n !== totalPage.value)
})
const emit = defineEmits(['change'])
watch(currentPage, (to: number): void => { // 通过更改当前页码，修改分页数据
// loading,value = true
console.log('change:', to)
emit('change', {
page: to,
pageSize: props.pageSize
})
})
onMounted(() => {
// 监听键盘Enter按键
document.onkeydown = (e): void => {
const ev = e || window.event
if (ev && ev.keyCode === 13 && jumpNumber.value) {
jumpPage(jumpNumber.value)
}
}
})
function dealPageList (curPage: number): number[] {
var resList = []
var offset = Math.floor(props.pageListNum / 2) // 向下取整
var pager = {
start: curPage - offset,
end: curPage + offset
}
if (pager.start < 1) {
pager.end = pager.end + (1 - pager.start)
pager.start = 1
}
if (pager.end > totalPage.value) {
pager.start = pager.start - (pager.end - totalPage.value)
pager.end = totalPage.value
}
if (pager.start < 1) {
pager.start = 1
}
if (pager.start > 1) {
forwardMore.value = true
} else {
forwardMore.value = false
}
if (pager.end < totalPage.value) {
backwardMore.value = true
} else {
backwardMore.value= false
}
// 生成要显示的页码数组
for (let i = pager.start; i <= pager.end; i++) {
resList.push(i)
}
return resList
}
function onForward (): void {
currentPage.value = currentPage.value - props.pageListNum > 0 ? currentPage.value - props.pageListNum : 1
}
function onBackward (): void {
currentPage.value = currentPage.value + props.pageListNum < totalPage.value ? currentPage.value + props.pageListNum : totalPage.value
}
function jumpPage (jumpNum: string | number): void {
if (Number(jumpNum)) {
if (Number(jumpNum) < 1) {
jumpNum = 1
}
if (Number(jumpNum) > totalPage.value) {
jumpNum = totalPage.value
}
changePage(Number(jumpNum))
}
jumpNumber.value = '' // 清空跳转输入框
}
function changePage (pageNum: number): boolean | void {
if (pageNum === 0 || pageNum === totalPage.value + 1) {
return false
}
if (currentPage.value !== pageNum) {
// 点击的页码不是当前页码
currentPage.value = pageNum
}
}
</script>
<template>
<div :class="[`m-pagination ${placement}`, { hidden: hideOnSinglePage && total<=pageSize }]">
<div class="m-pagination-wrap">
<span class="mr8" v-if="showTotal">共 {{ totalPage }} 页 / {{ total }} 条</span>
<span class="u-item" :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">
<svg class="u-arrow" viewBox="64 64 896 896" data-icon="left" aria-hidden="true" focusable="false">
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
></path>
</svg>
</span>
<span :class="['u-item', { active: currentPage === 1 }]" @click="changePage(1)">1</span>
<span
class="m-arrow"
ref="forward"
v-show="forwardMore && pageList[0] - 1 > 1"
@click="onForward"
@mouseenter="forwardArrow = true"
@mouseleave="forwardArrow = false">
<span v-show="!forwardArrow" class="u-ellipsis">•••</span>
<svg v-show="forwardArrow" class="u-icon" viewBox="64 64 896 896" data-icon="double-left" aria-hidden="true" focusable="false"><path d="M272.9 512l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3a31.99 31.99 0 0 0 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512zm304 0l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3a31.99 31.99 0 0 0 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z"></path></svg>
</span>
<span :class="['u-item', { active: currentPage === page }]" v-for="(page, index) in pageList" :key="index" @click="changePage(page)">{{ page }}</span>
<span
class="m-arrow"
ref="backward"
v-show="backwardMore && pageList[pageList.length - 1]+1 < totalPage"
@click="onBackward"
@mouseenter="backwardArrow = true"
@mouseleave="backwardArrow = false">
<span v-show="!backwardArrow" class="u-ellipsis">•••</span>
<svg v-show="backwardArrow" class="u-icon" viewBox="64 64 896 896" data-icon="double-right" aria-hidden="true" focusable="false"><path d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 0 0 188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 0 0 492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path></svg>
</span>
<span v-show="totalPage!==1" :class="['u-item', { active: currentPage === totalPage }]" @click="changePage(totalPage)">{{ totalPage }}</span>
<span class="u-item" :class="{ disabled: currentPage === totalPage }" @click="changePage(currentPage + 1)">
<svg class="u-arrow" viewBox="64 64 896 896" data-icon="right" aria-hidden="true" focusable="false">
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
></path>
</svg>
</span>
<span class="u-jump-page" v-if="showQuickJumper">跳至<input type="text" v-model="jumpNumber" />页</span>
</div>
</div>
</template>
<style lang="less" scoped>
.m-pagination {
margin: 16px 0;
}
.hidden {
display: none;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.m-pagination-wrap {
display: inline-block;
height: 32px;
line-height: 30px;
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
text-align: center;
.mr8 {
margin-right: 8px;
}
.u-item {
min-width: 30px;
height: 30px;
display: inline-block;
user-select: none; // 禁止选取文本
border: 1px solid #d9d9d9;
border-radius: 5px;
cursor: pointer;
transition: all .3s;
&:hover {
.active();
}
.u-arrow {
fill: rgba(0, 0, 0, 0.65);
width: 12px;
height: 12px;
transition: all .3s;
}
&:not(:last-child) {
margin-right: 8px;
}
}
.active { // 悬浮/选中样式
font-weight: 500;
color: @themeColor;
border-color: @themeColor;
.u-arrow {
fill: @themeColor;
}
}
.disabled {
// pointer-events: none; // 禁用鼠标事件
color: rgba(0, 0, 0, 0.25);
background: #fff;
border-color: #d9d9d9;
cursor: not-allowed;
&:hover {
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
border-color: #d9d9d9;
.u-arrow {
fill: rgba(0, 0, 0, 0.25);
}
}
.u-arrow {
fill: rgba(0, 0, 0, 0.25);
}
}
.m-arrow {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
min-width: 32px;
height: 32px;
letter-spacing: 2px;
font-size: 12px;
color: rgba(0, 0, 0, 0.25);
transition: all .3s;
cursor: pointer;
.u-ellipsis {
transition: all .3s;
}
.u-icon {
fill: @themeColor;
width: 12px;
height: 12px;
}
}
.u-jump-page {
margin-left: 8px;
line-height: 32px;
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
input {
vertical-align: top;
width: 26px;
height: 20px;
padding: 5px 11px;
margin: 0 8px;
border: 1px solid #d9d9d9;
border-radius: 5px;
background: transparent;
text-align: left;
outline: none;
transition: all 0.3s;
&:hover {
border-color: @themeColor
}
&:focus {
border-color: @themeColor;
box-shadow: 0 0 0 2px fade(@themeColor, 20%);
}
}
}
}
</style>②在要使用的页面引入分页器：
<script setup lang="ts">
import Pagination from './Pagination.vue'
import { ref } from 'vue'
const hideOnSinglePage = ref(false)
const total = ref(100)
const pagination = ref({
pageSize: 10,
p: 1
})
function changePage (pager: object) { // 分页器回调
console.log('pager:', pager)
}
</script>
<template>
<div>
<h2 class="mb10">Pagination 分页器基本使用</h2>
<Pagination
@change="changePage"
:current="pagination.p"
:pageSize="pagination.pageSize"
:total="total"
:hideOnSinglePage="hideOnSinglePage"
:showQuickJumper="true"
:showTotal="true"
placement="center"/>
<h2 class="mt30 mb10">分页器靠左(右)展示 (placement: left(right))</h2>
<Pagination
@change="changePage"
:current="pagination.p"
:pageSize="pagination.pageSize"
:total="total"
:hideOnSinglePage="hideOnSinglePage"
:showQuickJumper="true"
:showTotal="true"
placement="left"/>
<Pagination
@change="changePage"
:current="pagination.p"
:pageSize="pagination.pageSize"
:total="total"
:hideOnSinglePage="hideOnSinglePage"
:showQuickJumper="true"
:showTotal="true"
placement="right"/>
<h2 class="mt30 mb10">不展示快速跳转至某页，不显示当前页数和数据总量 (showQuickJumper: false & showTotal: false)</h2>
<Pagination
@change="changePage"
:current="pagination.p"
:pageSize="pagination.pageSize"
:total="total"
:hideOnSinglePage="hideOnSinglePage"
placement="left"/>
</div>
</template>
<style lang="less" scoped>
</style>五、
封装分页组件
<template>
<div class="page-bg">
<el-pagination @size-change="handlePageSizeChange"
@current-change="handlePageCurrentChange"
:current-page="pageIndex"
:page-sizes="[20, 50, 100, 200]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
background>
</el-pagination>
</div>
</template>
<script>
export default {
name: "Pagination",
props: {
pageIndex: { // 分页的当前页码
type: Number,
default: 1
},
pageSize: { // 每个分页展示的数据量
type: Number,
default: 20
},
total: { // 需要分页的总的数据量
type: Number
}
},
methods: {
handlePageSizeChange(val) {
console.log(`每页 ${val} 条`);
this.$emit('pageSizeChange',val)
},
handlePageCurrentChange(val) {
console.log(`当前页: ${val}`);
this.$emit('pageCurrentChange',val)
}
}
}
</script>
<style scoped>
.page-bg{
display: flex;
flex-direction: row;
height: 50px;
align-items: center;
}
</style>使用分页组件
<template>
<!-- 这里可以进行数据渲染 渲染tableData中的数据 -->
<Pagination
:total="total"
:page-index="pageIndex"
:page-size="pageSize"
:table-data="tableData"
@pageSizeChange="handlePageSizeChange"
@pageCurrentChange="handlePageCurrentChange"
>
</template>
import Pagination from 'Pagination组件的路径'
export default {
name: 'xxx组件名字',
components: {Pagination},
data() {
return {
total: 0, // 数据的总条数
pageIndex: 1, // 当前分页的页数 默认第一页
pageSize: 20, // 每个分页页面展示的数据条数 默认每页20条数据
tableData : [], // 展示在当前分页上的数据
totalTableData : [] // 全部的数据 在前端分页中使用到
}
},
mounted(){
subInfo() // 组件挂载之后进行一次接口请求
},
methods: {
// 处理分页的操作
// xxx操作一
// xxx操作二
},
}vue项目中使用分页_vue分页项目_桃音的博客-CSDN博客
六
Element-UI为我们提供了“Pagination分页”组件，我们选择功能最全的分页组件：
<template>
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
currentPage1: 5,
currentPage2: 5,
currentPage3: 5,
currentPage4: 4
};
}
}
</script>【VUE项目实战】24、分页效果实现_vue分页功能实现_光仔December的博客-CSDN博客
七、
1.导入相应的依赖
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.5</version>
<exclusions>
<exclusion>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
</exclusion>
<exclusion>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
</exclusion>
</exclusions>
</dependency>
2 mapper接口
public interface ClassInfoMapper {
public List<ClassInfo> findAllClass();
}
3.前端实现
<template>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="this.params.page"
:page-sizes="[1, 2, 3, 4]"
:page-size="this.params.size"
layout="total, sizes, prev, pager, next, jumper"
:total="this.total"
>
</el-pagination>
</div>
</template>
<script>
import Axios from "axios";
export default {
data() {
return {
total:'',
params: {
page: 1,
size: 6,
},
};
},
mounted() {
this.pagehelper();
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.params.size = val;
this.pagehelper();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.params.page = val;
this.pagehelper();
},
pagehelper:function(){
this.$axios
.get("/pagehelper/" + this.params.page + "/" + this.params.size)
.then((res) => {
console.log(res.data);
this.datas = res.data.list;
this.total = res.data.total;
});
}
},
};
</script>
<style scoped>
</style>
SpringBoot+VUE+Element UI实现分页操作（附源码）_vue分页插件实现_Willing卡卡的博客-CSDN博客
八
在vue文件中实现分页功能需要修改template和script。
其中template中加入，其中el-table中绑定的数据为showTableData
<div class="pageStyle">
<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="numberPerPage" :total="total" margin-top="100px">
</el-pagination>
</div>
methods: {
async getShopList(){
let result = await this.$http.getShopList();
this.tableData = result.data.list;
this.showTableData = result.data.list.slice(0,this.numberPerPage);
this.total = result.data.list.length;
},
handleCurrentChange(currentindex){
// console.log(currentindex);
this.showTableData = this.tableData.slice((currentindex-1)*5, currentindex*5)
// console.log(this.tempTableData);
},
created() {
this.currentdata = this.contentdata.slice(0, 6)
},
},
data() {
return {
tableData: [],
total:0,
showTableData:[],
numberPerPage:5, //希望每页展示的数据个数
};
},
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
