vue在切换下一页在切回来的时候,页面上编辑的数据怎么保存

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue在切换下一页在切回来的时候,页面上编辑的数据怎么保存相关的知识,希望对你有一定的参考价值。

参考技术A 方法如下:
在子组件的外边包上一个的标签;

如果是路由的方式,那么就在外边包上

或者是在定义路由组件的时候在routes[]里边的元数据meta中定义。

关于element 框架中table表格选中并切换下一页之前选中数据消失的问题

问题描述:

       在实际项目中使用element框架的table表格时,发现当前页选中了数据,点击切换下一页时,再选中数据,发现上一页选中的数据消失了。(目的是:要把用户选择的所有数据显示到页面上)

代码如下:     

<!-- html 代码 -->
<table :data="tableData" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKey"> // 3、行数据的key,用来优化table的渲染,在使用reserve-selection功能与显示树形数据时,该属性必填,支持多层访问,但不支持user.info[0].id这种,不过可以使用function
   <el-table-column type="selection" :reserve-selection="true"></el-taable-column>  //4、这个是选择框  reserve-selection 仅对type=selection的列有效,为true则会在数据更新之后保留之前选中的数据,需要指定row-key。
   <!--  省略掉其他 el-table-column 代码  -->
</table>

<!-- 分页  -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[5,10,15]" layout="total,sizes,prev,pager,next" :total="total">
</el-pagination>

<div class="show-choose-data">
  //显示用户选中的所有数据   {{multipleSelectionAll }}
</div>
<!-- js 代码 --> 假定 我们选中的数据赋值给变量 multipleSelectionAll 首先: 在请求 tableData 数据的function 中做的一些操作: requestTableData:function(){ //请求回来数据后,进行两次循环,循环tableData 以及 multipleSelectionAll this.tableData.forEach((item,i)=>{ this.multipleSelectionAll.forEach((multItem,j)=>{ if(this.tableData[i].某id值 == this.multipleSelectionAll[j].某id值){ this.$refs.multipleTable.toggleRowSelection(this.tableData[i],true);//这步操作是让 页面显示选中的数据 } }) }) }, handleSelectionChange:function(val){ this.multipleSelectionAll = val //这步是将页面选中的数据赋值给 multipleSelectionALL ,选中的数据都存储在这个变量里面 }, getRowKey:function(row){ return row.某id值 }, handleSizeChange:function(val){ //调用请求 tableData 数据的接口,size 变化 }, handleCurrentChange:function(val){ //调用请求 tableData 数据的接口,currentpage 变化 }

总结当前问题用到的知识点:

        1、用到 table 中的 toggleRowSelection 方法: 用于多选表格,切换某一行的选择状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为true则选中) 参数为(row,selected) 。

        2、用到 table中的事件selection-change ,当选择项发生变化时会触发该事件。(3-4)

 

以上是关于vue在切换下一页在切回来的时候,页面上编辑的数据怎么保存的主要内容,如果未能解决你的问题,请参考以下文章

如何在 iOS 中使用分页在 Scrollview 中进行下一个或上一个

Laravel 提交按钮不跳转到下一页和上一页

页面控制在完全进入下一页之前切换页面

jQuery轮播图练习

关于element 框架中table表格选中并切换下一页之前选中数据消失的问题

如何在 Chrome 中加载下一页之前断开 websocket