Layui数据表格如何实现在移动端点击行显示操作菜单-Layui教程-PHP中文网

移动端需用rowclick事件配合layer.open或底部抽屉实现行操作菜单；rowclick在skin:'row'或even:true时失效，应设skin:'line'并避免event拦截；touch延迟需touchstart兜底；数据需从table.cache回查确保准确。

移动端点击行显示操作菜单，不能依赖 hover 或右键事件，必须改用 rowclick 事件 + 弹层（layer.open）或底部抽屉式菜单。layui 表格本身不内置该交互，需手动接管点击行为并控制弹出位置与数据绑定。

为什么 rowClick 在移动端常失效？

Layui 的 table.on('row(…) 默认只在 skin: 'line' 或 'nob' 且 even: false 时稳定触发；若表格用了 skin: 'row'（默认值）或开启了隔行变色（even: true），点击事件会捕获不到目标行。

检查你的 render 配置是否含 skin: 'line'，否则先显式加上
确保没在列配置里写 event: 'xxx'，它会拦截原生行事件冒泡
移动端 touch 事件延迟可能导致点击未响应，可加 touchstart 代理兜底（见下文）

如何用 layer.open 实现轻量点击菜单

避免侵入表格 DOM，推荐用 layer.open 渲染独立浮层，传入当前行数据并绑定操作按钮。关键点是定位要准、关闭要自动、数据要可靠。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

菜单内容用 content 字符串拼接，或用 id 指向隐藏 <script type="text/html"></script> 模板
设置 area: ['auto', 'auto'] 和 offset: ['b', 'c'] 让菜单贴底居中，适配小屏
在回调里用 obj.data 拿数据 —— 注意：这是渲染后快照，原始字段建议提前挂到 data-_raw 属性或存入 table.cache
务必在 success 回调里对按钮绑定事件，否则 layer 关闭后事件丢失

<pre class="brush:php;toolbar:false;">table.on('row(demo)', function(obj){
  layer.open({
    type: 1,
    area: ['auto', 'auto'],
    offset: ['b', 'c'],
    content: '<div class="layui-btn-container">' +
      '<button class="layui-btn layui-btn-sm" lay-event="view">查看</button>' +
      '<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>' +
      '</div>',
    success: function(layero){
      layero.find('[lay-event]').on('click', function(){
        const act = $(this).attr('lay-event');
        if(act === 'del') {
          deleteRecord(obj.data.id);
        }
        layer.closeAll();
      });
    }
  });
});