layui 选项卡删除问题

最新推荐文章于 2025-07-05 10:11:32 发布

原创最新推荐文章于 2025-07-05 10:11:32 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

layui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用layui框架动态渲染Tabs组件，并确保每个标签页带有删除图标。通过两种方法实现，一是直接操作DOM进行动态添加，二是利用layui的自定义方法tabAdd。最终解决了动态渲染时删除图标不显示的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的：layui 动态渲染Tabs（element）带删除图标

官方例子

<div class="layui-tab" lay-allowClose="true">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户基本管理</li>
    <li>权限分配</li>
    <li>全部历史商品管理文字长一点试试</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">1</div>
    <div class="layui-tab-item">2</div>
    <div class="layui-tab-item">3</div>
    <div class="layui-tab-item">4</div>
    <div class="layui-tab-item">5</div>
    <div class="layui-tab-item">6</div>
  </div>
</div>

改成动态添加数据（第一种）

html

    <div class="layui-tab" lay-allowClose="true" lay-filter="demo">
        <ul class="layui-tab-title">
        </ul>
        <div class="layui-tab-content">
        </div>
      </div>

function renderContent(testData){
    var index = 0
    for(var item in testData){
        var name = '<li class="layui-this" lay-id="'+item+'">'+testData[item].QLRMC+'</li>';
        $(".layui-tab-title").append(name);
        var content = '<div class="layui-tab-item" id="content'+item+'"></div>'
        $(".layui-tab-content").append(content);
        var jf = new AForm("content"+item,config);
            jf.render(testData[item])
    }
    $(".layui-tab-title .layui-this").eq(0).addClass("layui-this");
    $(".layui-tab-content .layui-tab-item").eq(0).addClass("layui-show");
}

渲染成功，但是删除图标不出现

第二种使用自定义添加方法tabAdd

  var active = {
        //在这里给active绑定事件，后面可通过active调用这些事件
        tabAdd: function(name,id) {
            element.tabAdd('aformtab', {
                title: name,
                content: '',
                id: id //规定好的id
            })
        },
    };
function renderContent(active,Data){
    var index = 0
    for(var item in Data){
        active.tabAdd(Data[item].QLRMC,item);
        $(".layui-tab-content .layui-tab-item").eq(item).attr('id','content'+item);
        var jf = new AForm("content"+item,getConfig());
        jf.render(Data[item]);
    }
    $(".layui-tab-content .layui-tab-item").eq(0).addClass("layui-show");
  }

删除图标不显示问题解决。