<script setup lang="ts">
import {ref} from 'vue'
import { getManageList } from '@/api/articl.js'
const params = ref({
pagesize:4,//每页条数
pagenum:1,//当前页
cate_id:'',
state:''
})
const loading = ref(false)
const tableData = ref([])
const total = ref(0) //总条数
//初始列表
const getTableList = async ()=>{
loading.value = true
const res = await getManageList(params.value)
tableData.value = res.data.data
total.value = res.data.total
loading.value = false
}
getTableList()
//搜索
const onSearch = ()=>{
params.value.pagenum=1
getTableList()
}
// 重置
const onReset = ()=>{
params.value.pagenum=1
params.value.state=''
params.value.cate_id=''
getTableList()
}
//每页条数变化
const handleSizeChange = (size)=>{
params.value.pagesize = size
params.value.pagenum = 1
getTableList()
}
//当前页码变化
const handleCurrentChange = (page)=>{
params.value.pagenum = page
getTableList()
}
</script>
<template>
// 分页:current-page当前页、page-size每页条数、page-sizes每页可供选择的条数
// background背景颜色、small小尺寸、total总条数
<el-pagination
v-model:current-page="params.pagenum"
v-model:page-size="params.pagesize"
:page-sizes="[1, 2, 4, 6]"
:small="true"
:background="true"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</pageContainer>
</template>
vue3分页器el-pagination使用
最新推荐文章于 2024-06-20 08:00:00 发布