分页展示30条数据,却出来老多数据???

问题1:一开始我在页面上写了一个分页,只展示30条数据

但是展示了很多数据

问题所在:

因为我循环套循环,list数据和customer相乘(所以分页出现老多数据。)


问题2:(实际上是可以直接调用的,但是一开始调用符号整错了,以为是没有在模板里面关联这张表。。。)

下面是把这个关联的表加进去的过程:

回到原来的问题,如果我去掉customers的循环,用户就未定义用不了

with将customer的数据加进去

因为要在list里面用所以要在这里面加

这个样子调用它


那个模板他原本就是有写的

应为一开始我用的 . 去调用的所以报错找不到customer

这是两张表关联要用(->)这个

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3可以使用第三方分页组件库,如Element-Plus或者Ant-Design-Vue等,也可以自己编写分页组件。 以下是使用Element-Plus分页组件的示例代码: 1. 安装Element-Plus ```bash npm install element-plus --save ``` 2. 引入分页组件 在需要使用分页组件的页面中,引入分页组件: ```vue <template> <div> <el-pagination :total="total" :page-size="pageSize" @current-change="handleCurrentChange"> </el-pagination> <ul> <li v-for="item in currentData" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> import { ref } from 'vue' import { ElPagination } from 'element-plus' export default { components: { ElPagination }, setup() { const total = ref(50) // 数据量 const pageSize = ref(10) // 每页显示数据量 const currentPage = ref(1) // 当前页码 // 根据当前页码,截取对应的数据 const currentData = ref([]) const data = ref([...]) // 假设这里是从后台获取到的所有数据 const handleCurrentChange = (page) => { currentPage.value = page currentData.value = data.value.slice((page - 1) * pageSize.value, page * pageSize.value) } // 初始化第一页的数据 currentData.value = data.value.slice(0, pageSize.value) return { total, pageSize, currentPage, currentData, handleCurrentChange } } } </script> ``` 以上代码中,我们使用`ref`定义了数据量、每页显示数据量、当前页码和当前页的数据。在`handleCurrentChange`方法中,我们根据当前页码,截取对应的数据并更新`currentData`。在页面中,我们使用`el-pagination`组件来展示分页器,使用`v-for`指令遍历`currentData`来展示对应的数据。 注意:以上代码仅为示例代码,需要根据实际情况修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值