Vue和Element-ui实现分页,刷新时数据保持选中的状态不会恢复成默认。

最新推荐文章于 2024-05-01 15:39:02 发布
最新推荐文章于 2024-05-01 15:39:02 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： HTML5 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42143163/article/details/103879700
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--引入远程element-ui的样式-->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <div style="width: 80%;margin: 30px auto">
                <el-table :data="tableData | pagination(thisSearch.page,thisSearch.pageSize)" style="width: 100%;">
                    <el-table-column prop="date" label="日期"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                </el-table>
                <el-pagination
                        @size-change=&#
最低0.47元/天 解锁文章
CJW-Coder
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue + element 分页组件使用 以及实现刷新后页码不掉
hello world的博客
01-20 3907
1 分页组件初步介绍 分页组件最主要的参数有三个 current-page 当前页数,也就是当前的页面的页码,这是刷新后仍在当前页的关键参数 page-size 每页显示条目个数，注意别和 page-size 搞混 total 总条目数 就是所有数据的总量 注: 以上参数的值皆为 number 类型,为什么要强调这个呢?因为在刷新的时候会用到 其余的参数 ~ background boolean 是否为分页按钮添加背景色 ~ layout string 组件布局，子组件名用逗号分隔 ~ current-c
基于tp5的vue+element-ui 实现分页
04-10
在本项目中，我们主要探讨如何使用`ThinkPHP5 (TP5)`框架，结合前端的`Vue.js`和`Element UI`组件库来实现数据的分页显示。`ThinkPHP5`是一个流行的PHP开发框架，它提供了丰富的MVC功能，方便开发者快速构建Web应用...
vue切换路由data不恢复默认值，为什么
期待变成大神的博客
10-27 284
在路由1data数据list默认为空，操作list:['11']，返回主页面，跳转路由2，再返回主页面，跳转路由1，此时list:['11']，而不是为默认值空，这是为什么
vue-request的usePagination函数的使用
最新发布
qq_44444795的博客
05-01 668
【代码】vue-request的usePagination函数的使用。
刷新后，store中数据丢失处理
weixin_43422861的博客
08-07 3119
//在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventLi.
elementui里分页组件，点击换页默认跳回第一页的问题
weixin_47151361的博客
06-06 3352
elementui里分页组件，点击换页默认跳回第一页的问题
element-UI 分页器Bug，切换页面展示数量，页码刷新重置，原来页码高亮问题
Amanda_wmy的博客
01-24 5948
element-UI 分页器Bug，切换页面展示数量，页码刷新重置，原来页码高亮问题 Element-UI提供了分页器的两个方法，handleSizeChange和handleCurrentChange，然而在实际使用中，却发现再切换页面展示数量的时候，会出现一些BUG， 页面刷新了，高亮页码却还是上次选择的页面。可以用以下方法解决； 翻看element文档中发现有current-page，当前...
vue+Element-ui实现分页效果实例代码详解
10-17
Vue.js是一个轻量级的前端框架，它结合Element UI库可以轻松实现高效的分页效果。Element UI提供了丰富的组件，其中包括`Pagination`分页组件，使得开发者能够快速实现美观且功能完善的分页功能。 在Vue+Element UI...
在vue和element-ui的table中实现分页复选功能
10-15
主要介绍了在vue和element-ui的table中实现分页复选功能，本文代码结合图文的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue+Element-ui实现分页效果
01-21
本文实例为大家分享了vue+Element-ui实现分页效果的具体代码，供大家参考，具体内容如下 当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这...
vue关于从页面A跳转到页面B再跳转回到页面A，参数保持不变
聪明不喝牛奶的博客
07-10 1608
vue关于从页面A跳转到页面B再跳转回到页面A，参数保持不变 在做项目的时候难免会碰到多个页面之间的跳转传值，但是需要重新回到最开始的页面时最初的页面的参数还在的问题。那么这个问题就要涉及到一个浏览器的LocalStorage —前端存值三大哥之一，它可以自由的设置保存值的时长。 我们要在页面A中把值设置进去然后在要取出来的页面取出来。 //把值设置到localstorage中 window.localStorage.setItem('aaa',xxx); // aaa指的是存值的符号 // xxx 指的是
element分页器组件刷新父组件重置页数无效已解决
weixin_61273407的博客
04-19 1059
问题 : 将分页器组件封装为组件 在父组件刷新时, 虽然使用传参改变了分页器组件的页数, 可是只有第一次刷新父组件时页数会重置, 之后再改变页数刷新, 则页数不会重置 解决 : 给分页器组件中 添加 v-if , 在重置分页器组件页数时, 在父组件或分页器组件中控制一次true和false, 来刷新组件 <!-- 分页器组件 --> <el-pagination v-if="showPage" @size-change="handleSizeChange"
vue 3.0 实现 el-table分页后依然选中
qq_44170622的博客
12-28 577
setup() { const router = useRouter(); const multipleTable = ref(null); const state = reactive({ multipleSelection: [], ids: [], count: 0, init: { page: 1, num: 9, }, list: [...
VUE+ElementUI dialog打开时禁止iOS端的body滚动
Akikang的博客
12-26 2026
现象： 在原生app中嵌套web页面时，时常会遇到由于系统不同带来的差异。 此次引入ElementUI，使用其中的dialog组件时，明明默认dialog显示时，body不能滚动： 安卓和pc下没毛病，但在iOS下lock-scroll无效，dialog背后的body依然可以滚动。 解决方法： 思路： 主要是在打开dialog时设置html的 ...
使用element-ui的分页组件刷新后保留在当前页
weixin_46554787的博客
10-30 1483
使用element-ui的分页组件刷新后保留在当前页 //属性表示当前页数 :current-page.sync=“currentPage” 在created(){ }中对跳转的路径进行判断
el-drawer抽屉内的组件数据不更新
weixin_46972395的博客
08-24 1312
el-drawer抽屉内的组件数据不更新
Element-ui el-form二次封装 数据无法重置问题
sophialise的博客
07-09 429
原链接：https://www.cnblogs.com/xingguozhiming/p/10674104.html 在此基础上做了补充 效果： 表格代码： <!-- 搜索表单 --> <template> <div class="ces-search"> <el-form ref="editForm" :model="searchData" :size="size" inline :label-width="labelWidth">
【ElementUI】组件库el-menu组件在退出抽屉时无法将选中状态恢复到第一项
Y1lis的博客
07-15 2184
el-menu组件在退出抽屉再进入时无法将默认选中的高亮状态设置成第一项，两行代码解决这个问题。
elementui dialog中的form不能重置_Element UI 发布2.11.0版本，新增抽屉组件...
weixin_35965498的博客
02-02 103
简介Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，基于MIT协议。目前github star 数为38k+, 是一款非常热门的桌面端组件库。对于前端开发的朋友们Element既有基于vue版本的组件库，也有基于angular版本的组件库，当前前端开发"三国鼎立"的时刻，Element 可以说是非常值得好好学习的一个桌面端组件库。官网截图2.11.0 版本...
vue-element-ui前后端交互实现分页查询
02-26
在使用vue-element-ui进行前后端交互实现分页查询时，需要先在前端页面上定义分页器和表格组件，然后在后端API接口中获取分页信息和查询结果。具体步骤如下： 1. 在前端页面中使用vue-element-ui的分页组件和表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值