记录（十六）vue的分页功能

效果图

使用的是<el-pagination>

<el-pagination
        style="padding: 20px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pagenum"
        :page-sizes="[1, 2, 6, 10]"
        :page-size="pageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
        >
      </el-pagination>

const tableData = ref([])//文章列表
const total = ref(0)//总天数

const pageInfo = ref({
    pagenum:1,
    pagesize:10,
    state:1,
    keywords:'',
    
})
const handleSizeChange = (val)=> {
  pageInfo.value.pagesize = val
  refreshList();
}

const handleCurrentChange = (val)=> {
  pageInfo.value.pagenum = val
  refreshList();
}


// 在组件挂载完毕后调用 refreshList 函数
onMounted(() => {
  refreshList();
  //console.log(6655);
});
// 封装这个方法，方便在任意地方调用
const refreshList = async () => {
  await getNews_no(pageInfo.value).then((res) => {  //这个是接口
      if (res) { 
        //console.log(101,res);      
        tableData.value = res.items
        total.value = res.total
        //console.log(101,res.total)
      } else {
        ElMessage({
          message: "获取失败",
          grouping: true,
          type: "error",
        });
      }
    })
    .catch((err) => {
      ElMessage({
        message: "出错了",
        grouping: true,
        type: "error",
      });
    });
};