Vue3自定义组件遇到分页传输数据不正确解决办法

简介: Vue3自定义组件遇到分页传输数据不正确解决办法

Vue3

Element Plus

遇到问题

   <el-table
      :data="tableData"
    >
    ...其他el-table-column
    <template #default="scope">
        // 自定义组件
        <my-button name="编辑" :id="scope.row.id"/ >
      </template>
    </el-table>
    <el-pagination
     :page-size="10"
      layout="prev, pager, next"
      @current-change="currentChange"
     :total="21">
</el-pagination>

       在没有分页的情况,自定义组件的表现没有任何问题,但是当出现分页的时候,问题就出来了,当然如果不仔细的话,也不好发现,因为tableData展示的数据也是正确的,那么问题在哪?出现在往自定义组件传参的地方

<my-button name="编辑" :id="scope.row.id"/ >

       假设一共21条数据,10条一分页,第一页的id自上到下为1-10,第二页自上到下为11-20,第三页为21。

       默认会展示id为1-10的数据,点击第二页,展示的数据为11-20的数据,这点没问题,但是点击编辑的时候,传输的id就有问题了,例如从第一页到第二页,点击编辑数据11的时候,你会发现,传输的id不是11而是1。

产生原因

       因为第一页是十条数据,第二页也是十条数据,在首次加载的时候,也就是第一页,会根据条数渲染

<my-button name="编辑" :id="scope.row.id"/ >

       此时会出现10个my-button组件,但是第二页的时候,因为同样是10条数据,同样是my-button组件,渲染的时候会认为这是相同的内容,不再进行重新渲染,所以就会出现上述情况。

为了进一步验证猜想,点击到第三页,因为第三页只有一条数据,所以其他的9个my-button将被销毁,但是此时的id传输的还是1,因为第一条数据的my-button被保留下来了,但是如果再返回第二页又是什么情况?除了第一条数据之外,其他9条数据的my-button将被重新创建,而此时的id都是正确的id,12-20。

解决办法

       从上述原因大概明白了,由于不能判断组件的唯一性,所以能复用就复用,如果能够给每个组件一个唯一标识,问题是不是就能解决了?又翻看了el-table的属性,找到了row-key,介绍大概如下

行数据的 Key,用来优化 Table 的渲染

   <el-table
      :data="tableData"
      row-key="id"
    >
    </el-table>

注意事项

       使用row-key的时候确保提供的值唯一,否则仍会出现问题。

相关文章
|
19天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
86 1
|
2月前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
131 3
|
3月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
68 8
|
3月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
60 1
|
3月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
67 1
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
139 1
|
1天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
34 12
|
18天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
48 8
|
19天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
57 1
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
107 58