Layui选项卡Tab和Layui模板laytpl冲突问题

一、介绍

在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出的，如果你想对某列的单元格添加链接等其它元素，你可以借助该参数来轻松实现。这是一个非常实用且强大的功能，你的表格内容会因此而丰富多样。

• 类型：String，默认值：无

templet 提供了三种使用方式，请结合实际场景选择最合适的一种：

• 如果自定义模版的字符量太大，我们推荐你采用 方式一；
• 如果自定义模板的字符量适中，或者想更方便地调用外部方法，我们推荐你采用 方式二；
• 如果自定义模板的字符量很小，我们推荐你采用 方式三；

二、templet - 自定义列模板的 3 种方式

1、方式一：绑定模版选择器。

    table.render({
      cols: [[
        {field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
        ,{field:'id', title:'ID', width:100}
      ]]
    });
     
    等价于：
    <th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th>
    <th lay-data="{field:'id', width:100}">ID</th>

• 下述是templet对应的模板，它可以存放在页面的任意位置。模板遵循于 laytpl 语法，可读取到返回的所有数据

<script type="text/html" id="titleTpl">
  <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
</script>
 
注意：上述的 {{d.id}}、{{d.title}} 是动态内容，它对应数据接口返回的字段名。除此之外，你还可以读取到以下额外字段：
     序号：{{ d.LAY_INDEX }} （该额外字段为 layui 2.2.0 新增）
 
由于模板遵循 laytpl 语法（建议细读 laytpl文档 ），因此在模板中你可以写任意脚本语句（如 if else/for等）：
<script type="text/html" id="titleTpl">
  {{#  if(d.id < 100){ }}
    <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
  {{#  } else { }}
    {{d.title}}(普通用户)
  {{#  } }}
</script>

2、函数转义。自 layui 2.2.5 开始，templet 开始支持函数形式，函数返回一个参数 d，包含接口返回的所有字段和数据。如下所示：

table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200
      ,templet: function(d){
        return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'
      }
    }
    ,{field:'id', title:'ID', width:100}
  ]]
});    

3、方式三：直接赋值模版字符。事实上，templet 也可以直接是一段 html 内容，如：

templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
 
注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板

三、第四种方法（解决Layui选项卡Tab和Layui模板laytpl冲突问题）

• 在使用 选项卡Tabs 时，选项卡 与 laytpl 模板冲突，把 laytpl 模板当成字符串拼接进 我们要写的位置

//表格初始化
table.render({
  elem: '#LAY-user-table'
  ,cols: [[
    {field:'title', title: '文章标题', width: 200}
    ,{field:'id', title:'ID', width:100}
    ,{title: '操作', width: 300, align: 'center', fixed: 'right', toolbar: '#table-user-oper'}
  ]]
});

• 使用 方式一：绑定模版选择器。

<div class="layui-card-body" id="user-table">
    <table id="LAY-user-Table" lay-filter="LAY-user-Table"></table>
    <script type="text/html" id="table-user-oper">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>

        {{#  if(d.user_id && d.status == 0) { }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
        {{#  } }}

        {{#  if(d.close_status == 0) { }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="close">关闭</a>
        {{#  } }}

    </script>

</div>

~~~~~ 分割线：方法 [ 四 ] ~~~~~

• 如果自定义模板不能正常显示，也没有Js报错，建议采用 方式四；
• 方法四：在Js中拼接laytpl 模板字符串，再append追加到表格元素中

<div class="layui-card-body" id="user-table">
    <table id="LAY-user-Table" lay-filter="LAY-user-Table"></table>
    <!--<script type="text/html" id="table-user-oper">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>

        {{#  if(d.user_id && d.status == 0) { }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
        {{#  } }}

        {{#  if(d.close_status == 0) { }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="close">关闭</a>
        {{#  } }}

    </script>-->

</div>

//组装表格每列的操作按钮
let laytplString =
    '<script type="text/html" id="table-user-oper">\
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>\
        \
        {{#  if(d.user_id && d.status == 0) { }}\
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>\
        {{#  } }}\
        \
        {{#  if(d.close_status == 0) { }}\
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="close">关闭</a>\
        {{#  } }}\
        \
    <\/script>';

$('#user-table').append(laytplString);