游乐游手机版
首页/前端开发/文章详情

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

时间：2026-04-23 13:09
Layui表格自定义空数据提示：实现带“去添加”按钮的交互式空状态 Layui表格emptyText配置失效的解决方案 许多开发者在初次使用Layui表格时都会遇到一个典型问题：在table render()方法中配置了emptyText参数，但当数据为空时，页面依然显示默认的“暂无数据”提示。 根

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(`
        

          
        

      `);
    }
  }
});