首页 科技资讯 软件教程 游戏攻略 手机游戏
最新更新 游戏专题 资讯专题 排行榜
数码 系统
相机 win10
测评 win11
手机 智车
华为 Tesla
小米 理想
苹果 蔚来
游戏 软件
LOL 抖音
原神 微信
当前位置： 首页
前端开发
Layui表格怎么设置在数据为空时显示一个“去添加”的按钮

Layui表格怎么设置在数据为空时显示一个“去添加”的按钮

热心网友 时间：2026-04-23
转载

Layui表格自定义空数据提示：实现带“去添加”按钮的交互式空状态

Layui表格怎么设置在数据为空时显示一个“去添加”的按钮

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

Layui表格emptyText配置失效的解决方案

许多开发者在初次使用Layui表格时都会遇到一个典型问题：在table.render()方法中配置了emptyText参数，但当数据为空时，页面依然显示默认的“暂无数据”提示。

根本原因在于，Layui表格模块中的默认空状态文本是通过CSS伪元素硬编码实现的，导致emptyText配置项在实际渲染过程中**完全不起作用**。这可以视为Layui表格的一个设计特性，需要开发者通过特定方法进行适配。

要实现自定义空状态显示，主要有两种技术路径：一是通过CSS覆盖伪元素内容，二是在JavaScript回调函数中手动接管空状态渲染。后者在灵活性和功能性上更具优势，尤其当您需要在空状态区域添加可交互的“去添加”按钮时。

  • 首先，无需在cols或page配置中寻找emptyText选项。该配置仅对Layui早期版本（如2.5.x）的部分组件有效，表格模块并未实现此功能。
  • 其次，即使通过url配置异步加载数据，当后端返回空数组[]时，Layui也只会触发done回调，而不会自动渲染任何自定义空状态内容。
  • 因此，最可靠的解决方案是在done回调函数中，手动判断res.data.length === 0，并通过DOM操作插入自定义内容。

在done回调中动态插入“去添加”按钮的实现方法

核心实现逻辑非常明确：首先定位当前表格的渲染容器，然后将自定义提示区块精准插入到.layui-table-body元素内部。这里需要注意一个关键细节：不能直接将内容添加到.layui-table容器，否则可能破坏表格原有的DOM结构，导致样式异常。

以下是一段可直接复用的示例代码（假设您的表格实例标识为ins1）：

table.render({
  elem: '#demo',
  url: '/api/list',
  cols: [[{field:'title', title:'标题'}]],
  done: function(res, curr, count) {
    if (count === 0) {
      const tableBox = $(this.elem).next('.layui-table-box');
      const body = tableBox.find('.layui-table-body');
      // 清除可能存在的旧空状态提示
      body.find('.layui-table-empty').remove();
      // 插入自定义空状态区域
      body.append(`
        

          
        

      `);
    }
  }
});