layui实现动态显示表格按钮

最新推荐文章于 2024-09-06 11:46:58 发布

飘＊

最新推荐文章于 2024-09-06 11:46:58 发布

阅读量5.1k

点赞数 2

分类专栏：前端 layui 文章标签： layui 动态加载表格

本文链接：https://blog.csdn.net/weixin_44568752/article/details/89184368

版权

前端同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

layui

11 篇文章 1 订阅

订阅专栏

{
    title: '操作',
    fixed: 'right',
    minWidth:220,
    align:'center',
    toolbar:"#barDemo"
    // templet:methods.checkButton
}

1.用toolbar渲染

<script type="text/html" id="barDemo">
   <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">明细</a>
   {{#  if(d.rewPenStatus == 'confirmation'){  }}
      <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
      {{# if(d.source == '手工维护'){ }}
         <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      {{# } }}
      <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="confirm">确认</a>
      {{# if(d.source != '手工维护'){ }}
         <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="return">退回</a>
      {{# } }}
   {{# } }}
</script>

注意：必须用d去取值，d为layui表格自带的

2.用templet渲染

checkButton:function (data) {
 if(data!=null){
  var html = "";
  html +=  '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">明细</a>'
  if(data.rewPenStatus == 'confirmation'){// 状态为确认中
   html += '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>'
   if(data.source == '手工维护'){
    html += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
   }
   html += '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="confirm">确认</a>'
   if(data.source != '手工维护'){
    html += '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="return">退回</a>'
   }
  }
  return html;
 }
}