element.tabAdd方法报错：Uncaught TypeError: Cannot read properties of undefined (reading 'title')

[ZhouYixxx]

layui版本v2.6.8

一个非常简单的需求，我希望在订单Tab页，点击表格中带超链接的用户Id属性时，能自动跳转到用户tab页，如下图所示：

代码如下：
表格column结构：

{ field: 'colindex', title: '序号', align: 'center', minWidth: 50, type: 'numbers', fixed: 'left' }
, { field: 'Id', title: '订单Id', align: 'center', minWidth: 170, fixed: 'left' }
, {
    field: 'MemberId', align: 'center', title: '用户Id', minWidth: 110, templet: function (d) {
        return `<a href="#" title="点击跳转" lay-event="tabChange">${d.MemberId}</a>`}
}
, { field: 'BranchName', align: 'center', title: '网点', minWidth: 140 }
, { field: 'GoodsName', align: 'center', title: '商品名称', minWidth: 140 }

script部分：

layui.use(['element', 'form', 'jquery', 'table', 'laydate'], function () {
    var element = layui.element
        , form = layui.form
        , $ = layui.jquery
        , laydate = layui.laydate
        , dropdown = layui.dropdown
        , util = layui.util
        , table = layui.table;

<!--中间省略-->

    table.on('tool(operation)', function (obj) { //table原始容器的属性 lay-filter='operation' 
        var that = this;
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        if (layEvent === 'tabChange') {
              var url = 'https://ucenter.test.cn/Member/';
              //var url = '/Member/';
              window.parent.layui.element.tabAdd('layadmin-layout-tabs', { //tabAdd方法直接报错
                    content: '1234',
                    title: "1234",
                    //content: `<iframe src="${url}" lay-id="${url}" class= "layadmin-iframe" frameborder = "0"</iframe >`,
                    //id: url,
                    id: 1234,
                    change: true
                 });
              window.parent.layui.element.tabChange("layadmin-layout-tabs", url);//tabChange方法是正常的，另外tabDelete方法也正常。不知道原因为何
    }); 
});

结果就是tabAdd方法会报错：Uncaught TypeError: Cannot read properties of undefined (reading 'title')，但是tabChange和tabDelete方法都正常。github上查看出错的源代码，提示是这里：

  //外部Tab新增
  Element.prototype.tabAdd = function(filter, options){
    var TITLE = '.layui-tab-title'
    ,tabElem = $('.layui-tab[lay-filter='+ filter +']')
    ,titElem = tabElem.children(TITLE)
    ,barElem = titElem.children('.layui-tab-bar')
    ,contElem = tabElem.children('.layui-tab-content')
    ,li = '<li'+ function(){
      var layAttr = [];
      layui.each(options, function(key, value){
        if(/^(title|content)$/.test(key)) return;
        layAttr.push('lay-'+ key +'="'+ value +'"');
      });
      if(layAttr.length > 0) layAttr.unshift(''); //向前插，预留空格
      return layAttr.join(' ');
    }() +'>'+ (options.title || 'unnaming') +'</li>'; //options.title这里报错，似乎是options为空了
    
    barElem[0] ? barElem.before(li) : titElem.append(li);
    contElem.append('<div class="layui-tab-item">'+ (options.content || '') +'</div>');
    call.hideTabMore(true);
    call.tabAuto();
    return this;
  };

我完全按照官方示例写的，页反复检查了确保没有缺少括号等语法问题，实在是不知道为什么会出现这一问题。

[LSL1618]

试试把tabAdd调用这一段代码拆出来放到父级页面看看，function addNewTab(url) { layui.element.tabAdd(); }

[ZhouYixxx]

您的意思是在layui.use外部写吗，类似这样：

layui.use(['element', 'form', 'jquery'], function(){
     ....
 
    addTabNew(); //在内部调用addTabNew方法
     ....
});

function addTabNew() {
    layui.element.tabAdd('layadmin-layout-tabs', {
        content: '1234',
        title: "1234",
        id: 1234,
        change: true
    });
}

这个我尝试了，结果还是不行的。我猜确实要单步调试才能知道结果。但我不是专业前端，可能需要寻求前端同事帮忙才行了

[LSL1618]

不是layui.use外部这个意思，我的意思是你的订单管理是子级页面，左侧菜单和tab标签页管理是属于父级页面，你想要的是在子级页面调用父级页面的功能去新建标签页，所以叫你把addTabNew方法放在父级页面，然后在父级页面单独手动调用一下addTabNew方法，如果还是报错，那就说明element组件在LayuiAdmin和Layui中有差异，具体可能是tabAdd方法内部实现或者属性不一样。

[Sight-wcg]

你的 tab 是基于 layui 的 tab 二次封装的，原始 API 能否生效很难说，尝试使用 admin 内部封装的方法打开新 tab。
建议提供一个重现，这种问题没有错误堆栈信息，不调试是很难判断原因的。

[ZhouYixxx]

所以说Admin中的方法和原生的Layui有相当不一致的地方是吗，我是写后端的，平时前端写得少。我一直看的是Layui的文档 (https://layui.dev/docs )。但是LayuiAdmin好像也没有很全面的文档可供查阅

[Sight-wcg]

所以说Admin中的方法和原生的Layui有相当不一致的地方是吗，我是写后端的，平时前端写得少。我一直看的是Layui的文档 (https://layui.dev/docs )。但是LayuiAdmin好像也没有很全面的文档可供查阅

所以说Admin中的方法和原生的Layui有相当不一致的地方是吗

不是。admin 中的 tab 和 layui 的 tab，是两个不同的组件。你用 layui.tab 原始 API 操作经过二次封装的 tab，如果封装后的 tab 组件的行为和原始 tab 有差异，就可能出现问题。这不是 BUG，这是错误的使用方式。

我一直看的是Layui的文档 (https://layui.dev/docs )。但是LayuiAdmin好像也没有很全面的文档可供查阅

建议至少先去看一看，这是商业产品，核心模块的方法，怎么可能没有文档记录

[ZhouYixxx]

这个问题最后解决了，就是把处理的相关代码移动到父级frame去，在Admin中调用tabAdd就不会出现问题了。感谢