分页 (vue3)

最新推荐文章于 2024-06-16 22:42:41 发布

前端小白_小小敏

最新推荐文章于 2024-06-16 22:42:41 发布

阅读量1.4k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_46037501/article/details/124814423

版权

本文介绍了在Vue3中如何引入并使用Ant Design Vue分页组件。首先通过组件链接展示了Ant Design Vue的基本介绍，然后详细阐述了分页组件的引入步骤，包括HTML、data和JS代码的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、引入组件 Ant Design Vue

组件连接 https://www.antdv.com/components/overview-cn

二、使用步骤

html 代码如下（示例）：

<a-pagination
  v-model:current="paginationcurrent"
  :total="overitemtotal"
  :pagination="false"
  show-less-items
  class="paging"
  @change="handerChange"
/>

data 数据（示例）：

 // 完成列表
 const datas = reactive({
   recyclebin: [] // 存放列表总数据
   overitemtotal: null,
 })
 return {
	paginationcurrent: ref(1),
 }

js代码如下（示例）：

const handerChange = (val) => {
  console.log(val,'val') // 打印看参数
  let params = {} // 传参
  params.teamCode = data.teamMessage.teamCode 
  params.pageNum = val // 赋值
  // 请求接口
  store.dispatch('task/taskCompleteTaskLists', params).then((res) => {
     datas.todolist = res.data.records
     datas.overitemtotal = res.data.total
     // 此处是判断列表中的文字是否过长用...展示
     datas.todolist.map((el) => {
	   let itemTitle = el.title
	   if (itemTitle.length > 10) {
	     el.title = itemTitle.substring(0, 20) + '...'
	   }
    })
  })
}