layui 表格操作列按钮动态显示变换

最新推荐文章于 2024-01-25 17:37:36 发布

原创最新推荐文章于 2024-01-25 17:37:36 发布 · 2.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#layui

本文介绍如何在Layui的表格组件中实现按钮的动态显示与隐藏功能，通过在barDemo模板中添加条件判断，使得按钮能够根据img_status属性的不同值，展示为轮播显示或轮播隐藏状态，提升用户交互体验。

在使用Layui的表格组件时有时会用到可变换的操作比如显示或隐藏功能,那么就需要按钮的动态变换

实现方法在layui的barDome中加入如下代码

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="preview">预览</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  if(d.img_status == "yes"){ }}
    <a class="layui-btn layui-btn-warm layui-btn-xs no" lay-event="no">轮播隐藏</a>
    {{# }if(d.img_status == "no") { }}
    <a class="layui-btn layui-btn-xs yes" lay-event="yes">轮播显示</a>
    {{#  } }}
</script>

if中为判断显示隐藏的条件,lay-event是触发的事件
事件触发之后可以用
reload()方法刷新表格