Layui table 踩坑笔记

最新推荐文章于 2025-07-05 10:11:32 发布

原创最新推荐文章于 2025-07-05 10:11:32 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #json

本文记录了在使用layui table进行数据加载时遇到的问题及解决方案，包括data和url两种加载方式，数据格式校验，parseData的使用，以及请求地址错误导致的端口嵌套问题。在reload时需注意清空url以实现数据刷新，同时分享了一个简单的参数拼接方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui table 数据加载

初始数据加载有两种方法：data，url
data可以直接传静态数据json数据，或者一个json文本地址
url传接口地址，默认带page，limit参数，如果要传参可以加，详细参数见：官方文档
数据返回之后，可能提示数据格式不对，可以通过 parseData 方法去解析，在table.render 下加一个参数，如：

table.render({
      elem: '#demo'
	, parseData: function (res) { //res 即为原始返回的数据   对返回的数据进行处理
        return {
          "code": 0, //解析接口状态
          "msg": "success", //解析提示文本
          "count": 100, //解析数据长度
          "data": res //解析数据列表
        };
      }
   })

对于请求地址如果写错了的话，会默认带上当前地址，就会导致出现嵌套了一层端口，如：localhost:3000/localhost:8080 ，实际是要请求8080端口，导致请求不到，请仔细检查url
重新加载数据 reload 时，需要置 url 为空，否则会导致 layui 的 table 不刷新

axios.get(`http://127.0.0.1:8080/api/`)
      .then(res => {layui.table.reload('demoTable',{
        url:'',
        data:res.data,
        page:false,
        limit:res.length
      },true);

链接地址需要拼参数时，可以参考如下方法，比较暴力，应该有更优雅的方式，但对于初学者或者着急完成功能的人来说，可以使用（params 是个json，如 {“name”: “zhangsan”}）

function formateUrlParams(path, params) {
  for (var key in params) {
    path = path + '&' + key + '=' + params[key];
  }
  console.log("path=" + path)
  return path;
}