layui中table页保存后刷新页面后跳到当保存页面

1、核心思想利用layui组件sessionStore监听存储来实现

2、场景复现：

A页面点击编辑按钮跳转到B页面，如下图

 

图1- A页面

 

图2-B页面

3、B页面内逻辑代码

1）监听table，记录lay-table到session

①html代码

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="0">基本情况</li>
        <li lay-id="1">经济发展与提质增效</li>
        <li lay-id="2">生态环境</li>
        <li lay-id="3">社会保障</li>
        <li lay-id="4">民生领域</li>
        <li lay-id="5">公职人员</li>
        <li lay-id="6">考核数据和舆情信息</li>
        <li lay-id="7">重大事项约束</li>
        <li lay-id="8">乡村振兴</li>
        <li lay-id="9">教育事业</li>
    </ul>
    <div class="layui-tab-content">
        <!-- table页 -->
        <div class="layui-tab-item layui-show">
            <!-- table页内容 -->
            <div class="content" id="jbqk" style="page-break-after:always;width: 100%;">
            </div>
        </div>
    </div>
</div>

②JS代码

//监听div获取table当前打开的tabIndex放入缓存
element.on('tab(docDemoTabBrief)',function (data) {
    tabIndex = data.index;
    sessionStorage.setItem("tabIndex",tabIndex);
});
//信息编辑保存后，页面切换到当前页
if (sessionStorage.getItem("tabIndex")!=null && sessionStorage.getItem("tabIndex")!=''){
    element.tabChange('docDemoTabBrief', sessionStorage.getItem("tabIndex"));
    element.init();
}

4、因为操作session记录的原因，所以清除A页面内的session以达到不会返回A页面再去访问B页面的时候影响B页面的浏览。所以A页面的js需要清除一下JS：

//清除放入缓存中的tabIndex
sessionStorage.setItem("tabIndex","");