_0">第一步新建公共组件pagination.vue
<template>
<!-- 分页 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handlePageChange"
:page-sizes="[10, 30, 100]"
:page-size="pagesize"
:layout="layout"
:total="total">
</el-pagination>
</template>
<script>
export default {
name:'Pagination',
props: {
pagesize: [Number, String],//一页多少条
currentpage: [Number, String],//当前页
total:[Number, String],//总页数
options: [Object], // 分页发生变化赋值给options
render: [Function], // 跳转触发的请求
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
}
},
setup(props,context) {
// 分页导航
const handlePageChange = (val)=>{
props.options.page = val;
props.render();
}
//切换分页条数
const handleSizeChange = (val) =>{
props.options.limit = val;
props.render();
}
return{
handlePageChange,
handleSizeChange
}
}
}
</script>
<style>
</style>
第二步使用
<template>
<v-pagination
:pagesize="query.limit"
:total="pageTotal"
:options="query"
:render="getData">
</v-pagination>
</template>
<script>
import {ref,reactive,getCurrentInstance} from "vue";
import vPagination from '../../components/pagination.vue';
export default {
components: {
vPagination,
},
setup() {
const { proxy } = getCurrentInstance(); //获取上下文实例
const tableData = ref([]),//表格数据
pageTotal = ref(0),总条数
query = reactive({//配置对应的查询参数
appTimeStart:'',
appTimeEnd:'',
page: 1,
limit:10,//page第几页,limit是一页几个
});
// 获取表格数据
const getData = () => {
proxy.$request({
url: 'api/getList',
method: 'POST',
data:query
}).then(res => {
pageTotal.value = res.count;
tableData.value = res.data;
})
};
getData();
return {
query,
shortcuts,
tableData,
pageTotal,
getData
};
}
}
</script>
