table 列表前端操作保留状态，实现来回切换返显

使用场景：
table 列表中用户操作时改变记录状态时，不实时调接口，切换到别的页数能来回返显操作过的状态，最后通过提交按钮一起提交

$set使用解决如果在实例创建之后修改属性状态到实例上，它不会触发视图更新的问题

针对于操作项来说关键代码

// 操作后记录当前操作项，存下，同事改变列表当前项的数据状态，这里不考虑操作以后和原来状态有没有发生改变（因为双数次会让状态回到初始撞他），只要操作了该项， 都保存下来
changeStatus(data, index) {this.tableData[index].complainStatus = 1; // 状态值改变，原来是null 赋值为1const changeItem = this.tableData[index];this.$set(this.tableData, index, changeItem);this.$set(this.allSelectData,index + (this.pageNum - 1) * 10,changeItem); // 这里是针对某一项的，针对 index，所以allSelectData中会有为null的项，后续需要处理this.getChangeItem();
}// 获取列表状态改变项
getChangeItem() {this.resultList = []; // 最终提交的结果if (this.allSelectData.length) { // 处理为空的项摘除_map(this.allSelectData, v => {if (v) {this.resultList.push({ id: v.id,complainStatus: v.complainStatus,entType: v.entType});}});}},

针对来回切换table列表来说关键代码

// 因为切换的时候有去调接口，这里只考虑拿到当前页数据来说
假设这里现在调接口返回的数据为 data, 对 data进行处理，需要考虑 this.allSelectEntData是否存在，因为有可能没有操作而来回切换
if(this.allSelectData.length){const newTableData = []; // 存通过处理后最终展示的列表页数据data.list.map((item, index) => {this.allSelectData.forEach((d, i) => {if (item.code == d.code) { // 这里的 code 必须是唯一的，列表中不会有重复的item.complainStatus = d.complainStatus;}});newTableData.push(item);});this.tableData = newTableData;
}

table 列表前端操作保留状态，实现来回切换返显相关推荐

win10分屏快捷键无法使用_Win10分屏操作，再也不用来回切换视图了！
大家好,大飞鸽就是我,我就是大飞鸽. 前两天,大飞鸽一方面忙着做自己的实验,一方面在帮国资处的老师核对学校的设备清单表格,总的说来,就是一个词来形容:忙成狗!.在帮助国资处老师处理表格过程中,一方面要 ...
html表格联动,html前端基础：table和select操作
html前端基础:table和select操作发布时间:2020-05-13 09:58:10 来源:亿速云阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...
VUE项目从详情页退回列表页，保留列表页的筛选条件（筛选条件为单选），以及刷新后恢复默认的一个筛选状态
vue项目做的一个"花名册"页面,从"花名册"页面可以点击某一个人的名字,进入这个人的信息详情表格页面,而且这个人的信息详情页面中有一个"直属上级&q ...
php table字段排序,jQuery如何对table进行排序操作的示例详解
这篇文章主要介绍了jquery对table做排序操作的实例演示,通过添加自定义属性data-sort-field-ftime及表头添加onchange事件详细讲解了操作过程,需要的朋友可以参考下最近 ...
【Android 应用开发】Activity 返回堆栈清除操作 ( 默认状态 | 清除返回堆栈配置 | 不清除返回堆栈配置 | 清除指定界面配置 )
文章目录 I . 返回堆栈默认操作 II . 返回堆栈保留所有元素操作 III . 返回堆栈清除除根元素外所有元素操作 IV . 返回堆栈清除指定的 Activity V . 总结 I . 返 ...
python列表可以删除和修改吗_Python列表常见操作详解(获取,增加,删除,修改,排序等)...
本文实例讲述了Python列表常见操作.分享给大家供大家参考,具体如下: 列表是由一系列按特定顺序排列的元素组成的对象.因为列表通常包含多个元素, 所以建议给列表指定一个表示复数的名称. 我们用方括号 ...
django oracle 性能,4.利用Django在前端展示Oracle 状态趋势
利用Django在前端展示Oracle 状态趋势 2017-12-15 Python 宅必备开发环境操作系统:CentOS 7.4 Python版本 :3.6 Django版本: 1.10.5 操 ...
【七】Python全栈之路--字符串_列表相关操作
文章目录 1. format格式化_填充符号使用 1.1 format格式化 1.2 format的填充符号的使用 2. 字符串相关的方法 3. 列表的相关操作 4. 列表的相关函数 5. 深浅拷贝 ...
ant-design中对单个或多个table列表数据进行动态列合并
文章目录一. 实现效果二. 实现方法 2.1 版本:ant-design-vue:"^2.1.2" 2.2 方法:a-table组件里面的customCell功能 2.3 注意 ...

table 列表前端操作保留状态，实现来回切换返显

table 列表前端操作保留状态，实现来回切换返显相关推荐

最新文章

热门文章