element-ui 分页器中的 :current-page.sync是干什么的

最新推荐文章于 2024-06-17 16:23:51 发布
最新推荐文章于 2024-06-17 16:23:51 发布
阅读量977 收藏 8
点赞数 4
文章标签： ui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66196770/article/details/136497769
版权
本文详细解释了ElementUI中的current-page.sync如何实现父子组件间关于当前页码的双向绑定，特别是在分页组件中的应用，通过简化代码和共享状态提升开发效率。
摘要由CSDN通过智能技术生成

在Element UI中，current-page.sync是用于实现父子组件间关于当前页码的双向绑定的。具体来说：

  1. 双向绑定：.sync修饰符是Vue提供的一种语法糖，用于简化父子组件之间关于props的更新和事件触发的代码。当子组件改变了父组件传来的prop时，可以通过.sync修饰符通知父组件进行相应的更新。
  2. 使用场景：在分页组件中，通常需要将当前页码的状态在多个组件间共享。通过使用current-page.sync，可以实现当用户在分页组件中切换页码时，父组件中的对应变量也会得到更新。
  3. 代码示例：在Element UI的<el-pagination>分页组件中，可以通过:current-page.sync="pageNum"的形式，将父组件的pageNum变量与子组件的当前页码进行双向绑定。这样，无论在父组件还是子组件中修改pageNum，另一个组件中的值都会相应地更新。
  4. 工作原理：当子组件中触发了页码变化时，它会调用$emit方法发送一个事件给父组件，同时传递新的页码值。父组件监听这个事件，并更新对应的数据。这个过程由.sync修饰符自动处理，使得代码更加简洁。

综上所述，current-page.sync是Element UI中用于实现父子组件间关于当前页码的双向绑定的一种便捷方式，它使得在分页功能中管理当前页码的状态变得更加容易和直观

才艺のblog
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+element 设置弹窗_对 vue 修饰符 .sync 的理解
weixin_30819373的博客
12-28 1720
其实对这个属性有点陌生，一直都好像没怎么用到这个属性，但是就在今天，因为公司现在重构的这个项目是拿着element-ui的组件库改造的组件，变成公司自己的组件，所以当我在使用某一些组件的时候，好像是在使用 模态框的时候，我看到的这个属性，特别的好奇， 在使用的时候确实这样使用的 其实看官网就比较清楚了 在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vu...
element-ui@2.15.7.zip
11-28
压缩包 `element-ui@2.15.7.zip` 内可能包含以下内容： - `lib` 目录：包含了编译后的 CSS 和 JavaScript 文件，用于在项目中引入 Element UI 组件。 - `css` 子目录：CSS 样式文件，如 `element.css` 和 `element...
element-UI 分页器Bug，切换页码，页码改变但是页码高亮未变化
smouns_的博客
04-13 2120
Element-UI提供了分页器的两个方法，handleSizeChange和handleCurrentChange，然而在实际使用中，却发现再切换页面展示数量的时候，会出现一些BUG， 页面刷新了，高亮页码却还是上次选择的页面。可以用以下方法解决；在你的项目页面，你点击了分页按钮查看了后面页面的数据，然后变更了查询条件，查询了新的数据时，分页显示器上面还停留在上一次翻页的记录上面，而没有重置到第一页。1.最简单粗暴的手法，就是利用DOM渲染，刷新整个组件，这样，就模拟恢复到第一页的状态。
笔记: element-ui sync
最新发布
m0_67028989的博客
06-17 105
如果el-dialog在子组件中, open是父组件传过来的props，就不适用了，就会报错提示子组件不能直接修改props。.sync表示同步改变open的值，
elementui中的pagination中的current-page中的.sync不生效问题
weixin_63132926的博客
04-16 443
问题：当在页面A中切换页面到非第一页时，点击文件夹进入文件夹页面，当前视频卡片页面的页数是第一页，这里有一个按钮，返回上一页按钮，当点击返回上一页时，回到A页面，此时A页面上的页面页数也应该是进入视频卡片页面之前的页面，比如进去之前pagenum=3，此时出来也应该是3，但此时的问题是：数据展示的是第三页的，但分页组件选中的页面确实第一页，使用current-page.sync也不生效。这里是把进去之前的页面的分页数据进行存储。下面更新了，但是页码没切换。然后total又异步获取了。导致下面的就没有渲染。
elementui分页选择器el-pagination的bug，可使用current-page.sync解决
TanMengyi的博客
07-24 7276
参考文章：https://blog.csdn.net/zxwbkzh/article/details/78965309 在某个列表页，我点到第四页，然后选择其中某条数据进行编辑，打开编辑弹窗，编辑点确定后 期望： 列表刷新，展示第一页数据，最下面也展示在第一页 实际效果：数据是刷新到了第一页的数据，但是最下面展示仍然在第四页，如下图： 最开始我想的是直接修改el-pagination的curre...
elementui使用sync语法糖
ABidMan的博客
04-19 564
sync可以用来实现子组件向父组件传递数据，是一种方便的语法糖。
element 分页切换时:current-page无效 页数不会跟着一起切换
红烧咸咸鱼
04-26 471
element 分页切换时:current-page无效 页数不会跟着一起切换
vue-element-nocode-admin:element-ui 的代码可视化编辑
05-06
element-ui 的代码可视化编辑器，自动生成表单代码，列表代码。不是一个可视化解决方案，更像是生成模板的工具 :house: 网页版本，在preview分支 Install npm install -g ele-cli How to Use 服务端占用 3000 端口 ...
element-ui.rar element-ui核心库压缩包
12-20
这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要工具。 Element UI 的设计理念是简洁、易用，它的组件设计遵循 Material Design 规范，同时考虑到国内用户的...
VUE.js+element-ui实现JSON编辑器
07-24
在这个"VUE.js+element-ui实现JSON编辑器"项目中，开发者利用Vue.js的响应式数据绑定和组件化特性，结合Element-UI的组件库，创建了一个可以在网页上编辑JSON数据的工具。JSON（JavaScript Object Notation）是一种...
element-ui 2.15.14版本
10-09
Element UI 是一个基于 Vue.js 的开源前端组件库，版本号 2.15.14 表示这是它的一个特定更新版本。这个版本可能包含了错误修复、性能优化、新功能添加或者对现有组件的改进。Element UI 提供了一系列美观、易用且...
elementui+vue中sync用法解决父子组件通信问题
qq_49278774的博客
11-29 848
1.当我写对话框的时候遇到了这个问题 提示错误是因为子向父组件传值出错 sync可以解决这个问题 sync是类似于v-band可简写为@的语法糖、可利用sync进行子向父传值 具体用法（打开关闭对话框） 父组件props传值给子组件 <Child :visible.sync="visible" /> 子组件接收visible值，也可改变visible值返给父组件 <el-dialog title="标题" center :visible="vi
Element Ui 中的 :visible.sync
摸鱼大王的博客
08-13 7416
<!-- 弹出框dialog弹框 新增和修改弹出框--> <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="90px"> <el-form-item label="测试岗位" prop="postName"> <el-inpu
解决el-pagination组件，current-page 绑定的数据变了，但是页面当前页码并没有变的问题
qiuqiu1894的博客
03-27 6982
亲测有效！ 实现：在每一次切换后将页码置为1；在当前页自由切换页码。 使用:current-page.sync <el-pagination class="tc mg" :current-page.sync="filter.page" :page-sizes="[10, 20, 100, 200]" :page-size="filter.per_page" ...
封装element弹窗组件 使用sync
qq_38935512的博客
07-20 405
弹窗组件需要使用计算属性来过渡，不然直接使用自定义事件去改变show可以是可以，但是element右上角自带的关闭会报错（还是能关闭的）
element ui 分页(pagination)组件的current-page属性不更新视图的问题
weixin_45184807的博客
06-27 1981
今天在做项目的时候发现:current-page.sync设置了以后 分页的数据变化了 但是视图缺没有更新 1 这里的数据是最后一页的 数据是最后一页的 页码也增加的 视图也渲染了 但是相对应的 分页数据缺没有更新 查看工具对比后发现 这里的数据修改是不会更新视图的 这里是官网对current-page的描述 由此可见这个属性的值只能是一个简单类型的number值 而我设置的是一个对象的属性 由此可以得出结论current-page只能监听到简单类型的数据 2 解决办法 我们可以再定义一个数据
element-ui利用.sync和$attrs,$listener简化封装对话框组件dialog(一次、二次封装）
qq_41206305的博客
08-27 1155
在干业务时，总会遇到需要封装对话框组件。这里总结一下对话框的一次、二次（优雅永不过时！）封装 一次封装 普通封装 对话框： 这里注意不能直接更改props里的值，否则会报错 <template> <div> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>内层dialog消息</span> <span slot="
element-ui案例分析1(el-dialog |.sync|transition 的name的作用)（2020-10-09）
Larry的博客
10-09 510
对话框案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>element-ui</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <bod
element-ui分页器如何实时数据
05-30
要实现element-ui分页器的实时数据更新，可以使用以下步骤： 1. 在组件中定义一个变量来存储当前页数和每页显示的数据条数。 2. 监听变量的变化，当变量发生变化时，重新请求数据并更新分页器的总条数和当前页数。 3. 在分页器组件中绑定页码和每页显示数据条数的变量，当用户点击分页器时，更新变量的值，触发数据更新。 下面是一个示例代码： ```html <template> <div> <el-table :data="tableData" border> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> <el-pagination v-model="currentPage" :total="total" :page-size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </template> <script> export default { data() { return { tableData: [], currentPage: 1, pageSize: 10, total: 0, }; }, watch: { currentPage: { handler() { this.getData(); }, }, pageSize: { handler() { this.currentPage = 1; this.getData(); }, }, }, mounted() { this.getData(); }, methods: { getData() { // 根据 currentPage 和 pageSize 请求数据 // 更新 tableData 和 total }, handleSizeChange(val) { this.pageSize = val; }, handleCurrentChange(val) { this.currentPage = val; }, }, }; </script> ``` 在这个示例中，我们使用了 `watch` 来监听 `currentPage` 和 `pageSize` 的变化，当变化时，重新请求数据并更新分页器的总条数和当前页数。同时，在分页器组件中绑定了 `currentPage` 和 `pageSize` 的变量，并监听了分页器的点击事件，更新变量的值，触发数据更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值