0
点赞
收藏
分享

微信扫一扫

layui选项卡切换刷新页面

自由的美人鱼 2022-03-12 阅读 115

layui选项卡切换刷新页面

最近在改之前工作流页面,遇到选项卡切换刷新的问题
简单叙述需求:
1.在我的流程页面分别有:我的待办、我的已办、我发起的;三个页面
2.页面有“暂无数据”的标识,如果某一项没有数据则展示“暂无数据”标识
3.由于页面只有一个标识,其他没有数据时会影响页面 标识展示
4.需要选项卡切换刷新来调整标识显示隐藏
看页面最终实现效果:
在这里插入图片描述
在这里插入图片描述

代码:

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
         <li class="layui-this">我的待办</li>
         <li>我的已办</li>
         <li>我发起的</li>
     </ul>
     <div class="layui-tab-content">
         <div class="layui-tab-item layui-show" >
             <div class="layui-row layui-col-space15" id="tableView">

             </div>
         </div>
         <div class="layui-tab-item">
             <div class="layui-row layui-col-space15" id="tableViewHistory">

             </div>
         </div>
         <div class="layui-tab-item">

         </div>
     </div>
 </div>

JS代码:

 	//选项卡设置 开始
    var layid = location.hash.replace(/^#docDemoTabBrief=/, '');
    element.tabChange('docDemoTabBrief', layid);
    element.on('tab(docDemoTabBrief)', function(elem){
        location.hash = 'docDemoTabBrief='+ $(this).attr('lay-id');
    });
    //监听事件
    $('.layui-tab-title').on('click', function(title) {
        if(title.target.innerText=="我的待办"){
            mytaskRunning();
        }else if(title.target.innerText=="我的已办"){
            mytaskHistory();
        }else{
            myInitiator();
        }
    });

根据选项卡名称进行判断的。
功能实现

在这里插入图片描述

举报

相关推荐

0 条评论