Layui表格怎么自定义加载中的图标和文字-Layui教程-PHP中文网

loading是布尔值开关，仅控制是否显示默认加载层；改图标文字需用layer.load()手动接管或CSS覆盖，但后者有兼容性和动态性缺陷。

layui table 的 `loading` 配置项到底怎么用

直接说结论：loading 是个布尔值开关，不是用来设图标或文字的——它只控制「是否显示默认加载层」。想改图标和文字，得绕开这个配置，走 dom 操作或 css 覆盖。

很多人试过在 render() 里写 loading: { text: '加载中...' }，结果完全没反应，就是因为 layui 2.x 的 table 模块压根不认这种写法。官方文档里那个 loading 示例，其实属于 layer.load()，被误抄进表格说明里了。

loading: true → 显示默认灰色半透明遮罩 + 小圆圈动画（无文字）
loading: false → 完全不显示任何加载态，表格空白等数据
没有 loading: { icon: '...', text: '...' } 这种合法结构

用 `done` 回调 + `layer.load()` 手动接管加载态

这是最可控、兼容性最好的做法：关掉表格自带加载层，自己用 layer.load() 控制样式和文案，再在 done 里关闭。

注意两点：一是必须把 loading: false 显式写上；二是 layer.load() 返回的索引要存好，不然关不掉。

table.render({
  elem: '#demo',
  url: '/api/list',
  loading: false,
  done: function(res, curr, count) {
    // 加载完成，关闭 layer.load()
    if (this.loadIndex) {
      layer.close(this.loadIndex);
      this.loadIndex = null;
    }
  },
  request: {
    pageName: 'page',
    limitName: 'limit'
  },
  parseData: function(res) {
    // 请求发出前手动打开加载层
    if (!this.loadIndex) {
      this.loadIndex = layer.load(1, { 
        content: '<i class="layui-icon layui-icon-loading"></i> 正在加载...',
        time: 0 
      });
    }
    return {
      code: res.code,
      msg: res.msg,
      count: res.total,
      data: res.data
    };
  }
});