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

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

来源：互联网 2026-04-22 10:00:01

Layui表格emptyText配置无效的解决方案 Layui表格数据为空时emptyText不生效的原因许多开发者在Layui 2.8+版本中配置table.render()的emptyText选项时，发现数据为空时仍然显示默认的“暂无数据”文案。其根本原因在于，该默认文案是通过CSS伪元素直

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

Layui表格数据为空时emptyText不生效的原因

许多开发者在Layui 2.8+版本中配置table.render()的emptyText选项时，发现数据为空时仍然显示默认的“暂无数据”文案。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

其根本原因在于，该默认文案是通过CSS伪元素直接写死的，表格模块中的emptyText配置项实际上并未生效。这是Layui表格模块的一个已知特性，需要通过其他方式实现自定义空状态。

实现自定义空状态主要有两种方法：使用CSS覆盖伪元素内容，或在回调函数中手动渲染空状态界面。后者更为灵活可控，尤其适用于需要添加“去添加”等交互按钮的场景。

无需在cols或page配置中寻找emptyText选项，该配置对表格模块无效。
即使通过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(`
        
          
        
      `);
    }
  }
});

代码$(this.elem).next('.layui-table-box')用于定位Layui动态生成的表格包裹容器，该容器包含了滚动、空状态等逻辑。
建议使用.layui-table-empty类名，以继承Layui内置的居中、字体等基础样式。
注意table.reload()方法不会重新执行done回调，也不会自动清理旧的空状态区块。

为何不使用text: {none: 'xxx'}配置

尽管Layui的部分组件（如laydate、form）支持text: {none: 'xxx'}配置，但表格模块并未实现此功能。

查看table.js源码可知，表格的空状态显示依赖于硬编码的模板字符串和CSS，并未读取text.none配置。

因此，类似text: { none: '' }的配置在表格中无效。
即使通过CSS覆盖.layui-table-view .layui-table-tips::before伪元素内容，也只能替换文本，无法绑定点击事件。
结论是，手动生成DOM是实现交互式空状态目前最可靠的方法。

兼容性与注意事项

空状态设计需考虑多种布局场景下的兼容性。当表格启用height（固定高度）、scrollbar（滚动条）或limit（分页）时，必须将空状态容器置于.layui-table-body内部，以确保按钮可见且功能正常。

使用height: 'full-xx'等固定高度配置时，.layui-table-body会被设置为overflow-y: auto。将按钮置于该可滚动区域内可保证其始终可见。
注意后端返回的数据格式。若返回{code:0, data:null}而非data:[]，建议在parseData回调中统一转换为空数组，以确保count === 0判断准确。
页面存在多个表格时，清理旧空状态需限定作用域。建议基于当前表格的this.elem上下文操作，避免使用全局选择器如$('.layui-table-empty')。