一、页面销毁前保存搜索条件

beforeDestroy() { // 1、设置搜索条件 const searchCondition = { searchValue: this.tableForm, // 这是当前的搜索值 }; // 2、把它存储到 sessionStorage (使用JSON.stringify()将其转化为字符串) window.sessionStorage.setItem( "searchCondition", JSON.stringify(searchCondition) ); }

二、页面创建后获取保存的查询条件

created() { // 1、获取之前的查询条件（需要JSON.parse()将其转为对象） const searchCondition = JSON.parse( window.sessionStorage.getItem("searchCondition") ); const order_id = JSON.parse( window.sessionStorage.getItem("orderid") ); if (searchCondition) { // 2、若存在，则覆盖初始查询条件 this.tableForm = searchCondition.searchValue; // 这里是搜索框的值 window.sessionStorage.removeItem("searchCondition"); } if (order_id){ this.order_id = order_id window.sessionStorage.removeItem("orderid"); } this.getList(); // 这里是查询数据的函数 },

三、跳转之前保存ID，定位到表格行

toDetail(id) { this.order_id = id; window.sessionStorage.setItem( "orderid", JSON.stringify(this.order_id) ); this.$router.push({ path: ``, query: { id } }); },

四、定位到表格指定行

el-table数据刷新后会重新定位至表格头的位置，想要更新数据后任处于之前操作的位置，就要在操作时记录下当前表格滚动条的位置，数据更新后设置表格位置为刚才记忆的位置。 解决思路：通过遍历表格的数据，找到对应的数据(id==this.order_id)的数据，设置此行高亮，并且找到表体的dom元素，然后通过scrollTop的方法滚动到指定位置，即可;

searchMember(id) { if (this.tableData && this.tableData.length) { for (var i = 0; i < this.tableData.length; i++) { const item = this.tableData[i]; if (this.tableData[i].id === id) { // 表格每行高度不一样，懒得写获取行高的，写死60 this.$refs.table.bodyWrapper.scrollTop = 60 * (i - 1); this.$refs.table.setCurrentRow(item); break; } } return; } },