分页 (vue3)

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

文章目录 前言一、引入组件 Ant Design Vue二、使用步骤总结

---

前言

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

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

---

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

一、引入组件 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) + '...'
	   }
    })
  })
}

---

总结

提示：这里对文章进行总结：以上就是今天要讲的内容