layui table 的toolbar 根据状态展示不同按钮

￡神魔★判官ぃ 2023-01-20 15:54 19阅读 0赞

参考:[https://www.layui.com/doc/modules/laytpl.html][https_www.layui.com_doc_modules_laytpl.html]

目前想实现如下效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70 1][]

根据发布状态展示不同按钮

此时在 toolbar 的<script>进行逻辑设置

<script type="text/html" id="toolBar">
        
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
        {
       {#  if(d.id !=0 && d.isPublish ==0){ }}
        <a class="layui-btn layui-btn layui-btn-xs" lay-event="publish">发布</a>
        {
       {#  } }}
        {
       {#  if(d.id !=0 && d.isPublish ==1){ }}
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="forbid">禁用</a>
        {
       {#  } }}
        {
       {#  if(d.id !=0){ }} 
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        {
       {#  } }}
    </script>

比如 我根据 isPublish 状态来展示部分数据，按照格式

<script type="text/html" id="toolBar">
        
        
        {
       {#  if(d.字段 +判断方式){ }}
        <a class="layui-btn layui-btn layui-btn-xs" lay-event="xxxx">xxx</a> 
        {
       {#  } }} 
       
    </script>

即可

[https_www.layui.com_doc_modules_laytpl.html]: https://www.layui.com/doc/modules/laytpl.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210513172436704.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70 1]: /images/20221021/c141d07c02774f39bb7c44d8c612a0b1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue+element 根据状态，显示不同的操作按钮

效果截图： ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_s

骑猪看日落/ 2023年10月10日 14:00/ 0 赞/ 54 阅读

相关 layui table 根据值进行不同的操作

<script type="text/html" id="barTable"> <a class="layui-btn layui-btn-primary layui-bt

小鱼儿/ 2023年08月17日 17:14/ 0 赞/ 182 阅读

相关 layui——按钮

按钮 ![按钮][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

痛定思痛。/ 2023年06月12日 11:23/ 0 赞/ 73 阅读

相关 uniapp根据不同的状态渲染不同的标签

![9360937a253b7dd629cd4077248a053c.png][] <view class="text-grey text-xs">

客官°小女子只卖身不卖艺/ 2023年01月23日 03:52/ 0 赞/ 144 阅读

相关 layui table 的toolbar 根据状态展示不同按钮

参考:[https://www.layui.com/doc/modules/laytpl.html][https_www.layui.com_doc_modules_laytp

￡神魔★判官ぃ/ 2023年01月20日 15:54/ 0 赞/ 20 阅读

相关 uniapp根据不同的状态渲染不同的标签

![9360937a253b7dd629cd4077248a053c.png][] <view class="text-grey text-xs">

r囧r小猫/ 2022年10月11日 13:48/ 0 赞/ 346 阅读

相关 HTML同一个table中不同的按钮提交不同表单

> 在同一个页面的table中提交用不同的按钮提交不同的表单通常需要多个form，如果为了排版需要对齐不同的button，可以用table的tbody标签实现将tbo

左手的ㄟ右手/ 2022年07月15日 07:56/ 0 赞/ 312 阅读

相关根据不同status状态参数动态展示不同css样式

第一种：两种不同状态切换显示，在class属性中使用三目运算符动态选择Class属性即可在wxss中定义被点击和未被点击的样式，如下： \[css\] [view

妖狐艹你老母/ 2022年05月27日 04:07/ 0 赞/ 629 阅读

相关 Echarts-图表根据值的不同展示成不同的颜色

series : \[ \{ name:'直接访问', type:'bar',

红太狼/ 2022年05月27日 00:15/ 0 赞/ 300 阅读

相关 Springboot结合layui展示table出现的问题

前台代码 <table> <tbody> <tr> <td><pre style="background-color:2b2b2b;color:a9b7c6

超、凢脫俗/ 2022年05月21日 04:11/ 0 赞/ 232 阅读