currentPage1 = ref(1) // 当前页码 46 const pageSize1 = ref(2) // 选择每页几条 47 const total1 = ref(0) 48 const background = ref(false) 49 const disabled = ref(false) 50 const pageData = ref([]) 51 52 // 分页逻辑 53 function getPageDatas() { 54 pageData.value = []...
functionpageQuery(current,limit){ // 模仿分页查询,将表格的数据裁切一下 // 1 2 3 //下标 0-9 10-19 20-29 letbegin=current*limit-limit //这里不减一是因为,slice方法裁切是左闭右开数组 letend=current*limit tableData.value=tableData.value.slice(begin,end) } 方法调用,这里需要注意几个地方。
const currentPage = computed<number | undefined>({ get: () => props.page, set: value => { emit('update:page', value); } }); const pageSize = computed<number | undefined>({ get() { return props.limit; }, set(val) { emit('update:limit', val); } }); function handleSizeChan...
exportdefault{setup(){consttableData=ref([]);constcurrentPage=ref(1);constpageSize=ref(10);retu...
2. 分页组件的@current-change调用的方法默认会传入一个参数,即点击的页码数。所以实现点击跳转,就要把分页查询参数的当前页current赋该值。 function getData(val = 1){ searchData.current=val // 先把数据搞上 tableAddData() pageQuery(searchData.current,searchData.limit) ...
pageNum:this.currentPage, pageSize:this.pageSize, search:this.search } }).then(res =>{ console.log(res) this.tableData = res.data.records this.total = res.data.total }) }, 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. ...
:current-page.sync="currentPage1" > </el-pagination> vue3.0 <el-pagination v-model:current-page="currentPage1" > </el-pagination> v-slot Child.vue <template> 具名插槽 <slot name="one"/> 作用域插槽 <slot :data="list"/> 具名作用域插槽 <slot...
分页器标签:里面有三个很重要的配置:current-page、page-size 、total <template#pagination><el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange"//当前页数:current-page="page":page-sizes="[5, 10, 20, 50, 100]"//当前页数显示的总条数:page-size="pageSize"layout="...
<template> <el-pagination class="pll-right" v-model:current-page="currentPage" v-model:page-size="pageSize" background layout="total, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </template> import {reactive, ref,...
本案例用到vue3、composition_API、vuex、element-plus框架 分页器标签：里面有三个很重要的配置：current-page、page-size 、total 创建一个reactive对象用来保存分页数据，并负责将数据传给服务器 创建一个用来保存实现效果的方法,并交给vuex进行数据处理，这里用到的是 在vuex的逻辑实现 service中的逻辑 ...